/* ========================================================================== Fracto — estilos principais ========================================================================== */ :root { --c-bg: #fbfbfb; --c-surface: #f1f1ef; --c-ink: #121212; --c-ink-soft: #5c5c5c; --c-line: #dedede; --c-accent: #ea5d32; --c-accent-ink: #ffffff; --c-dark: #121212; --c-dark-surface: #1c1c1c; --c-dark-ink: #fbfbfb; --c-dark-soft: #a3a3a3; --font: "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* Escala tipográfica (celular → computador). Ver /guia-de-estilo/ */ --fs-display: clamp(2rem, 1.62rem + 1.6vw, 2.8125rem); /* H1 32 → 45 */ --fs-h2: clamp(1.625rem, 1.47rem + 0.67vw, 2rem); /* H2 26 → 32 */ --fs-h3: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem); /* H3 20 → 24 */ --fs-h4: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem); /* H4 17 → 18 */ --fs-list: clamp(1.875rem, 1.54rem + 1.4vw, 2.8125rem); /* Lista de soluções 30 → 45 */ --fs-lead: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem); /* Destaque 17 → 18 */ --fs-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem); /* Corpo 16 → 17 */ --fs-small: 0.875rem; /* Pequeno 14 */ --fs-tag: 0.8125rem; /* Tag 13 */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --lh-display: 1.05; --lh-h2: 1.1; --lh-h3: 1.15; --lh-h4: 1.2; --lh-body: 1.2; --lh-longform: 1.3; /* Aliases usados pelas páginas internas */ --fs-xs: var(--fs-tag); --fs-sm: var(--fs-small); --fs-base: var(--fs-body); --fs-lg: var(--fs-lead); --fs-xl: var(--fs-h3); --fs-2xl: var(--fs-h2); --fs-3xl: var(--fs-display); --space-section: clamp(4.5rem, 3rem + 6vw, 9rem); --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --radius: 20px; --radius-sm: 10px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } /* Seleção de texto: laranja claro com texto preto, em qualquer fundo */ ::selection { background: #fed6c5; color: #121212; } html { -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; letter-spacing: -0.015em; } h1 { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-display); letter-spacing: -0.025em; } h2 { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-h2); letter-spacing: -0.02em; } h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-h3); } h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-h4); letter-spacing: 0; } h1 strong, h2 strong { font-weight: var(--fw-semibold); color: var(--c-accent); } .muted { color: #8a8a8a; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 1rem; z-index: 100; padding: 0.75rem 1rem; background: var(--c-ink); color: var(--c-bg); border-radius: var(--radius-sm); } .skip-link:focus { left: 1rem; } /* Layout ------------------------------------------------------------------ */ .container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 800px; } .section { padding-block: var(--space-section); } .section--tight { padding-block: calc(var(--space-section) * 0.5) var(--space-section); } .section--dark { background: var(--c-dark); color: var(--c-dark-ink); } .section__head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); } .section__title { font-size: var(--fs-2xl); } .section__head .section__title { margin: 0; } .section > .container > .section__title { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); } .grid { display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } } .eyebrow, .tag { display: inline-flex; align-items: center; width: fit-content; margin: 0 0 1.25rem; padding: 0.45rem 0.9rem; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; font-size: var(--fs-tag); font-weight: var(--fw-medium); line-height: 1; letter-spacing: 0; text-transform: none; color: #8a8a8a; background: transparent; text-decoration: none; /* cinza médio: tag é apoio, não destaque */ } .tag--glass { border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(18,18,18,0.35); backdrop-filter: blur(10px); } /* Celular: tag menor */ @media (max-width: 600px) { .eyebrow, .tag { padding: 0.35rem 0.7rem; font-size: 0.75rem; } } /* Cabeçalho de seção padronizado: [tag opcional] + título H2 */ .section-head { margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); text-align: center; } .section-head .tag { margin-inline: auto; } .section-head--left { text-align: left; } .section-title { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-h2); letter-spacing: -0.02em; } /* Botões ------------------------------------------------------------------ */ .btn { --btn-bg: var(--c-ink); --btn-ink: var(--c-bg); display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.5rem; border: 1px solid var(--btn-bg); border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font: 600 var(--fs-sm)/1 var(--font); text-decoration: none; cursor: pointer; transition: transform 0.4s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s; } .btn:hover { transform: translateY(-2px); } .btn .arrow { transition: transform 0.4s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn--accent { --btn-bg: var(--c-accent); --btn-ink: var(--c-accent-ink); } .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); } .btn--ghost:hover { border-color: var(--c-ink); } .btn--sm { padding: 0.7rem 1.1rem; font-size: var(--fs-xs); } .btn--lg { padding: 1.15rem 1.9rem; font-size: var(--fs-base); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .link-arrow .arrow { transition: transform 0.4s var(--ease); } .link-arrow:hover .arrow { transform: translateX(4px); } /* Header ------------------------------------------------------------------ */ .site-header { position: fixed; --hdr-top: clamp(2rem, 1.2rem + 2vw, 3.25rem); top: var(--hdr-top); left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: clamp(1.75rem, 1rem + 2.8vw, 3.75rem); pointer-events: none; transition: transform 0.6s var(--ease); } .site-header > * { pointer-events: auto; position: relative; } /* Fora do topo, o menu fica numa faixa sólida com blur: retângulo reto, mesmo respiro em cima e embaixo */ .site-header { --bar-pad: 1.25rem; transition: transform 0.6s var(--ease), top 0.5s var(--ease); } .site-header.is-solid { top: var(--bar-pad); } .site-header::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--bar-pad)); bottom: calc(-1 * var(--bar-pad)); background: rgba(251, 251, 251, 0.86); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; transition: opacity 0.4s var(--ease), background-color 0.4s; pointer-events: none; } .site-header.is-solid::before { opacity: 1; } /* A cor da faixa segue o tom (não só quando sólida): ao sumir/aparecer ela não passa pelo branco. Em página escura a faixa é sempre escura. */ .site-header.is-dark::before, .is-dark-page .site-header::before { background: rgba(18, 18, 18, 0.86); } .site-header.is-hidden { transform: translateY(calc(-100% - 3rem)); } /* Sobre fundo escuro (vídeo, seções pretas) o logo fica branco e o menu inverte (classe .is-dark via main.js) */ .site-header__logo { color: var(--c-ink); transition: color 0.4s; } .site-header__logo .logo { display: block; width: 110px; height: auto; } .logo .logo-ink { fill: currentColor; } .logo .logo-accent { fill: var(--c-accent); } .site-header.is-dark .site-header__logo { color: #fbfbfb; } .site-header.is-dark .menu-toggle { background: #fff; } .site-header.is-dark .menu-toggle span { background: var(--c-ink); } .site-header__actions { display: flex; align-items: center; gap: 0.75rem; } .menu-toggle { display: grid; place-content: center; gap: 6px; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--c-ink); cursor: pointer; transition: transform 0.4s var(--ease), background-color 0.3s; } .menu-toggle span { display: block; width: 18px; height: 1.6px; background: #fff; transition: transform 0.4s var(--ease); } .menu-toggle:hover { transform: scale(1.06); background: var(--c-accent); } .menu-toggle:hover span:first-child { transform: translateY(-1px) scaleX(0.7); } @media (max-width: 640px) { .site-header .site-header__cta { display: none; } } /* O 'Comece um projeto' do topo some quando o fechamento ou o rodapé estão na tela (main.js); o rodapé tem o próprio botão ('Fale com a gente'). */ .site-header__cta { transition: opacity 0.4s, visibility 0.4s; } .site-header.cta-off .site-header__cta { opacity: 0; visibility: hidden; } .site-header__logo { flex-shrink: 0; } /* Menu lateral (referência: Komma Komma) */ .menu { position: fixed; inset: 0; z-index: 90; } .menu[hidden] { display: none; } .menu__backdrop { position: absolute; inset: 0; background: rgba(18,18,18,0.45); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.5s var(--ease); } .menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 30rem); display: flex; flex-direction: column; padding: 1.5rem clamp(1.25rem, 1rem + 1vw, 2rem) 2rem; background: #ececec; color: var(--c-ink); transform: translateX(100%); transition: transform 0.7s var(--ease); } .menu.is-open .menu__backdrop { opacity: 1; } .menu.is-open .menu__panel { transform: none; } .menu__close { align-self: flex-end; width: 2.75rem; height: 2.75rem; padding: 0.6rem; border: 0; background: none; color: inherit; cursor: pointer; transition: transform 0.4s var(--ease); } .menu__close:hover { transform: rotate(90deg); } .menu__list { list-style: none; margin-top: 3rem; } .menu__link { display: block; padding: 0.3rem 0.9rem; margin-left: -0.9rem; font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); font-weight: var(--fw-regular); line-height: 1.25; letter-spacing: -0.03em; text-decoration: none; position: relative; z-index: 0; opacity: 0; transform: translateX(2rem); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.3s; } .menu__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); } .menu__link:hover::before, .menu__link.is-current::before, .menu__link:focus-visible::before { transform: scaleX(1); } .menu__link:hover, .menu__link.is-current, .menu__link:focus-visible { color: #fff; outline: none; } .menu.is-open .menu__link { opacity: 1; transform: none; } .menu.is-open li:nth-child(2) .menu__link { transition-delay: 0.05s; } .menu.is-open li:nth-child(3) .menu__link { transition-delay: 0.1s; } .menu.is-open li:nth-child(4) .menu__link { transition-delay: 0.15s; } .menu.is-open li:nth-child(5) .menu__link { transition-delay: 0.2s; } .menu__footer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(18,18,18,0.15); font-size: var(--fs-small); } .menu__footer-links a { display: block; margin-top: 0.4rem; text-decoration: none; } .menu__footer-links a:hover { color: var(--c-accent); } .menu__label { color: #8a8a8a; } body.menu-open { overflow: hidden; } /* Abertura (loader) */ .loader { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: #121212; } .intro .loader { display: grid; } .intro body { overflow: hidden; } .loader__mark { width: clamp(64px, 8vw, 96px); overflow: visible; } .loader__block { fill: #fbfbfb; } .loader__block.is-accent { fill: var(--c-accent); } /* Hero (home) ------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: end; padding-block: 9rem clamp(3rem, 2rem + 4vw, 6rem); } .hero__title { max-width: 20ch; font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.04em; } .hero__title em { font-style: normal; color: var(--c-accent); } .hero__bottom { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: clamp(2rem, 1rem + 3vw, 4rem); } .hero__lead { max-width: 34ch; font-size: var(--fs-lg); color: var(--c-ink-soft); } .hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero__shape { position: absolute; z-index: -1; top: 12%; right: -8%; width: clamp(260px, 38vw, 620px); aspect-ratio: 1; border-radius: 28%; background: radial-gradient(circle at 30% 30%, #ff8a5c, var(--c-accent) 55%, #b83e18); filter: blur(0.5px); opacity: 0.95; } /* Page hero --------------------------------------------------------------- */ .page-hero { padding-block: clamp(8rem, 6rem + 6vw, 12rem) clamp(2rem, 1rem + 3vw, 3.5rem); } .page-hero__title { max-width: 20ch; font-size: var(--fs-3xl); letter-spacing: -0.04em; } .page-hero .btn { margin-top: 2rem; } .page-hero--center { min-height: 80svh; display: grid; place-items: center; text-align: center; } .page-hero--center .page-hero__title { margin-inline: auto; } .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; } .filters__item { padding: 0.55rem 1.1rem; border: 1px solid var(--c-line); border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .filters__item:hover { border-color: var(--c-ink); } .filters__item.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); } /* Cards ------------------------------------------------------------------- */ .case-card__link, .post-card__link { display: block; text-decoration: none; } .case-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--c-surface); } .case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .case-card__link:hover .case-card__media img { transform: scale(1.045); } .case-card__media .tag { position: absolute; top: 1rem; left: 1rem; margin: 0; border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(18,18,18,0.35); backdrop-filter: blur(10px); } .case-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; } .case-card__title { font-size: var(--fs-xl); } .case-card__more { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--c-line); border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.5s var(--ease); } .case-card__link:hover .case-card__more { background: var(--c-accent); border-color: var(--c-accent); color: #fff; transform: rotate(-45deg); } .case-card.is-filtered-out { display: none; } /* Portfólio: título e filtros centralizados, projetos em 2 colunas com bastante respiro */ .portfolio-hero { text-align: center; } .portfolio-hero .page-hero__title { margin-inline: auto; } .portfolio-hero .filters { justify-content: center; } .case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 2rem + 3vw, 5.5rem) clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem); } @media (max-width: 700px) { .case-grid { grid-template-columns: 1fr; } } /* Card (referência wearedirect.co/work): imagem 3:2, nome + frase à esquerda, tags à direita */ /* Ritmo do site atual: dois projetos menores lado a lado (quadrados) e um grande na largura toda, e repete. O JS marca .is-wide pela ordem dos projetos visíveis (o ritmo se refaz ao filtrar); sem JS vale o 3º, 6º... */ .case-grid .case-card__media { aspect-ratio: 1 / 1; border-radius: var(--radius); } .case-grid .case-card.is-wide, html:not(.js) .case-grid .case-card:nth-child(3n) { grid-column: 1 / -1; } .case-grid .case-card.is-wide .case-card__media, html:not(.js) .case-grid .case-card:nth-child(3n) .case-card__media { aspect-ratio: 2 / 1; } @media (max-width: 700px) { .case-grid .case-card__media, .case-grid .case-card.is-wide .case-card__media { aspect-ratio: 4 / 3; } } .case-grid .case-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1rem; } .case-grid .case-card__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-h3); } /* Seta no canto: contorno branco; no mouse o círculo fica laranja e a seta passa (sai pela direita, entra pela esquerda), igual aos botões */ .case-card__arrow { position: absolute; top: 1rem; right: 1rem; z-index: 1; overflow: hidden; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); background: rgba(18, 18, 18, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease); } .case-card__arrow-i { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.55s var(--ease); } .case-card__arrow-i--next { transform: translateX(-120%); } .case-card__arrow .arrow { width: 18px; height: 18px; } .case-card__link:is(:hover, :focus-visible) .case-card__arrow { background: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); } .case-card__link:is(:hover, :focus-visible) .case-card__arrow-i { transform: translateX(120%); } .case-card__link:is(:hover, :focus-visible) .case-card__arrow-i--next { transform: translateX(0); } .case-card__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; flex-shrink: 0; } .case-card__tags .tag { margin: 0; } @media (max-width: 700px) { .case-grid .case-card__meta { flex-direction: column; align-items: flex-start; } .case-card__tags { justify-content: flex-start; } } .post-card__media { overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--c-surface); } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .post-card__link:hover .post-card__media img { transform: scale(1.045); } .post-card__body { padding-top: 1.25rem; } .post-card__meta--top { align-items: center; margin-bottom: 0.9rem; } .post-card__meta--top .tag { margin: 0; border-color: var(--c-accent); color: var(--c-accent); } .post-card__meta--top span:first-child { color: inherit; } .post-card__meta { display: flex; gap: 1rem; margin-bottom: 0.6rem; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-soft); } .post-card__meta span:first-child { color: var(--c-accent); } .post-card__title { font-size: var(--fs-lg); line-height: 1.25; } .post-card__excerpt { margin-top: 0.6rem; color: var(--c-ink-soft); font-size: var(--fs-sm); } /* Serviços ---------------------------------------------------------------- */ .services-list { list-style: none; border-top: 1px solid currentColor; } .services-list__item { border-bottom: 1px solid rgba(128, 128, 128, 0.35); } .services-list__link { display: grid; grid-template-columns: 4rem 1fr 1.2fr 2.5rem; align-items: center; gap: 1.5rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); text-decoration: none; transition: padding 0.5s var(--ease), color 0.3s; } .services-list__link:hover { padding-inline: 1rem; color: var(--c-accent); } .services-list__index { font-size: var(--fs-sm); opacity: 0.6; } .services-list__title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; } .services-list__text { font-size: var(--fs-sm); opacity: 0.75; } .services-list__arrow { justify-self: end; } .services-list__arrow .arrow { width: 22px; height: 22px; transition: transform 0.5s var(--ease); } .services-list__link:hover .arrow { transform: rotate(-45deg); } @media (max-width: 760px) { .services-list__link { grid-template-columns: 2.5rem 1fr 1.5rem; } .services-list__text { grid-column: 2 / -1; } .services-list__arrow { grid-row: 1; grid-column: 3; } } .features { counter-reset: f; } .feature { padding: 2rem; border-radius: var(--radius); background: var(--c-dark-surface); } .feature__index { display: block; margin-bottom: 2.5rem; color: var(--c-accent); font-weight: 600; } .feature__title { font-size: var(--fs-lg); margin-bottom: 0.75rem; } .feature__text { color: var(--c-dark-soft); font-size: var(--fs-sm); } /* Documento (política de privacidade, termos de uso): título à esquerda, índice fixo e numerado (números laranja, como em Nossas soluções) e o texto à direita, na grade 1fr/1fr das páginas de projeto. */ .document-hero { padding-top: clamp(8rem, 6rem + 6vw, 11rem); } .document-hero__title { max-width: 18ch; } .document-meta { grid-template-columns: 1fr 1fr; max-width: 40rem; margin-bottom: 0; } .document-meta a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .document-meta a:hover { color: var(--c-accent); } .document-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 5rem); align-items: start; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 3rem + 4vw, 7rem); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-top: 1px solid var(--c-line); } .document-body--single { grid-template-columns: minmax(0, 1fr); max-width: 50rem; } .document-toc { position: sticky; top: calc(var(--hdr-top, 3rem) + 5rem); } .document-toc__title { margin-bottom: 1rem; font-size: var(--fs-small); color: #8a8a8a; } .document-toc__list { list-style: none; border-top: 1px solid var(--c-line); } .document-toc__list li { border-bottom: 1px solid var(--c-line); } .document-toc__list a { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0; color: #8a8a8a; text-decoration: none; transition: color 0.3s, transform 0.5s var(--ease); } .document-toc__index { flex: 0 0 1.5rem; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-accent); } .document-toc__list a:hover, .document-toc__list a.is-current { color: var(--c-ink); } .document-toc__list a.is-current { transform: translateX(0.5rem); } /* Texto: H2 numerados no mesmo padrão do índice */ .document-content { counter-reset: doc-h2; font-size: var(--fs-body); color: #3d3d3d; } .document-content > :first-child { margin-top: 0; } .document-content h2 { counter-increment: doc-h2; display: flex; align-items: baseline; gap: 0.75rem; margin-top: 2.75em; scroll-margin-top: 8rem; font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--c-ink); } .document-content h2:first-child { margin-top: 0; } .document-content h2::before { content: counter(doc-h2, decimal-leading-zero); flex: 0 0 auto; font-size: var(--fs-small); color: var(--c-accent); } .document-content strong { color: var(--c-ink); font-weight: var(--fw-semibold); } .document-content a { color: var(--c-ink); text-decoration-thickness: 1px; } .document-content a:hover { color: var(--c-accent); } /* Tabela: contorno cinza, cabeçalho preenchido em cinza e linhas brancas */ .document-content figure.wp-block-table { margin: 1.5em 0 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; } .document-content table { font-size: var(--fs-body); border-collapse: collapse; } .document-content .wp-block-table thead, .document-content .wp-block-table tfoot { border: 0; } .document-content .wp-block-table th, .document-content .wp-block-table td { border: 0; border-bottom: 1px solid var(--c-line); } .document-content .wp-block-table th + th, .document-content .wp-block-table td + td { border-left: 1px solid var(--c-line); } .document-content .wp-block-table tbody tr:last-child td { border-bottom: 0; } .document-content th { padding: 0.9rem 1.25rem; background: #efefef; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-ink); } .document-content td { padding: 1rem 1.25rem; vertical-align: top; } .document-content td:first-child { color: var(--c-ink); } @media (max-width: 760px) { .document-meta, .document-body { grid-template-columns: 1fr; } .document-toc { position: static; } /* Tabela vira lista: cada linha mostra os dois rótulos */ .document-content thead { display: none; } .document-content table, .document-content tbody, .document-content tr, .document-content td { display: block; } .document-content tr { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-line); } .document-content tbody tr:last-child { border-bottom: 0; } .document-content .wp-block-table td { padding: 0; border: 0; } .document-content .wp-block-table td + td { border-left: 0; } .document-content td + td { margin-top: 0.6rem; } .document-content td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-ink); } } /* Texto só para leitores de tela e buscadores */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Conteúdo (/conteudo/): post em destaque na moldura do vídeo da home, depois filtros e cards ------ */ .blog-feature { height: 100svh; min-height: 34rem; padding: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem); } .blog-feature__frame { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: flex-end; border-radius: var(--radius); background: #161616; clip-path: inset(0 round var(--radius)); color: #fff; } .blog-feature__media { position: absolute; inset: 0; } .blog-feature__media img { width: 100%; height: 100%; object-fit: cover; } /* escurece de baixo para cima, para o texto branco sempre ter leitura */ .blog-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,0.25) 0%, rgba(18,18,18,0.1) 35%, rgba(18,18,18,0.8) 100%); } .blog-feature__content { position: relative; z-index: 1; width: min(100%, 60%); /* 3/5 da moldura */ padding: clamp(1.5rem, 1rem + 3vw, 4rem); } .blog-feature__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; font-size: var(--fs-small); color: rgba(255,255,255,0.8); } .blog-feature__meta .tag { margin: 0; } .blog-feature__title { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-display); letter-spacing: -0.025em; text-wrap: pretty; } /* linha maior em cima, menor embaixo (sem palavra sozinha) */ .blog-feature__title a { color: inherit; text-decoration: none; } .blog-feature__lead { max-width: 52rem; margin: 1rem 0 1.75rem; font-size: var(--fs-lead); color: rgba(255,255,255,0.8); } .blog-hero { padding-bottom: 0; } @media (max-width: 860px) { .blog-feature__content { width: 100%; } } .blog-list { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .blog-list__filters { margin: 0 0 clamp(2rem, 1.2rem + 2.5vw, 3.5rem); } .blog-list__more { margin-top: 3rem; text-align: center; } .blog-list__more a { color: inherit; } .js .blog-list__more.is-auto { visibility: hidden; height: 1px; margin: 0; overflow: hidden; } /* com JS os próximos entram sozinhos */ .blog-list__loading { grid-column: 1 / -1; justify-self: center; width: 0.6rem; height: 0.6rem; margin-top: 1rem; background: var(--c-accent); animation: blog-loading 0.9s ease-in-out infinite alternate; } @keyframes blog-loading { to { transform: rotate(90deg) scale(0.6); opacity: 0.4; } } /* Contato (referência Komma Komma): página escura, título com palavra que troca, formulário em linhas */ .is-dark-page { background: #121212; color: #fbfbfb; } .is-dark-page ::selection { background: #fed6c5; color: #121212; } .contact { padding-block: clamp(8rem, 6rem + 6vw, 11rem) clamp(4rem, 3rem + 4vw, 7rem); } .contact__title { display: grid; justify-items: start; font-size: clamp(2.75rem, 1.6rem + 3vw, 4.5rem); font-weight: var(--fw-light); line-height: 1.05; letter-spacing: -0.04em; } .contact__words { position: relative; display: inline-grid; overflow: hidden; padding-bottom: 0.08em; color: var(--c-accent); font-weight: var(--fw-medium); white-space: nowrap; } .contact__word { grid-area: 1 / 1; justify-self: start; } .contact__word:not(.is-current) { visibility: hidden; } /* antes do JS (e com movimento reduzido) só a primeira aparece */ .contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; } .contact__info { position: sticky; top: calc(var(--hdr-top, 3rem) + 5rem); } .contact__intro { max-width: 22rem; font-size: var(--fs-lead); color: var(--c-dark-soft); } .contact__list { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .contact__list dt { font-size: var(--fs-small); color: var(--c-dark-soft); } .contact__list dd { margin: 0.2rem 0 0; font-size: var(--fs-body); } .contact__list a { color: inherit; text-decoration: none; transition: color 0.3s; } .contact__list a:hover { color: var(--c-accent); } /* campos em linha: rótulo pequeno cinza em cima, linha fina embaixo, laranja ao focar */ .contact-form { display: grid; gap: 2rem; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .field { display: grid; gap: 0.5rem; margin: 0; } .field label { font-size: var(--fs-small); color: var(--c-dark-soft); } .field input, .field textarea, .field select { width: 100%; padding: 0.5rem 0 0.75rem; border: 0; border-bottom: 1px solid #3a3a3a; border-radius: 0; background: transparent; color: #fbfbfb; font: inherit; font-size: var(--fs-lead); outline: none; transition: border-color 0.3s; } .field textarea { resize: vertical; min-height: 7rem; } .field select { appearance: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23a3a3a3' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0.25rem center; } .field select option { color: #121212; } /* Lista própria no lugar da nativa (main.js): abre para baixo, fundo cinza sólido, item marcado em laranja-claro */ .select { position: relative; } .select__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .select__button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.5rem 0 0.75rem; border: 0; border-bottom: 1px solid #3a3a3a; background: none; color: #fbfbfb; font: inherit; font-size: var(--fs-lead); text-align: left; cursor: pointer; transition: border-color 0.3s; } .select__button.is-empty { color: #5c5c5c; } .select__button::after { content: ""; width: 0.55rem; height: 0.55rem; margin-right: 0.3rem; border-right: 1.5px solid #a3a3a3; border-bottom: 1.5px solid #a3a3a3; transform: translateY(-25%) rotate(45deg); transition: transform 0.4s var(--ease); } .select.is-open .select__button { border-color: var(--c-accent); } .select.is-open .select__button::after { transform: translateY(25%) rotate(-135deg); } .select__list { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 20; max-height: 21rem; overflow: auto; overscroll-behavior: contain; padding: 0.4rem; list-style: none; border: 1px solid #3a3a3a; border-radius: var(--radius-sm); background: #262626; box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0s 0.35s; scrollbar-width: thin; scrollbar-color: #5c5c5c transparent; } .select.is-open .select__list { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.35s var(--ease); } .select__option { padding: 0.7rem 0.9rem; border-radius: 6px; color: #e6e6e6; cursor: pointer; } .select__option.is-active, .select__option:hover { background: #333; } .select__option[aria-selected="true"] { background: #fed6c5; color: #121212; } .field input::placeholder { color: #5c5c5c; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-accent); } .field.is-invalid input, .field.is-invalid textarea { border-color: #ff8a65; } .contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* caixa de consentimento: quadrado (linguagem da marca), laranja quando marcado */ .contact-form__consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.4; color: var(--c-dark-soft); cursor: pointer; } .contact-form__consent input { appearance: none; flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0.05rem 0 0; border: 1px solid #5c5c5c; border-radius: 3px; background: transparent; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; } .contact-form__consent input:checked { border-color: var(--c-accent); background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; } .contact-form__consent input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .contact-form__consent.is-invalid input { border-color: #ff8a65; } .contact-form__consent a { color: #fbfbfb; text-decoration: underline; text-underline-offset: 0.2em; } .contact-form__footer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1.5rem 2rem; } /* mesmas colunas dos campos: consentimento | botão */ .contact-form__footer .cta { justify-self: end; } @media (max-width: 600px) { .contact-form__footer { grid-template-columns: 1fr; } .contact-form__footer .cta { justify-self: start; } } .contact-form.is-sending .cta { opacity: 0.6; pointer-events: none; } .contact-form__status:empty { display: none; } .contact-form__status { padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: var(--fs-body); } .contact-form__status.is-ok { background: rgba(234, 93, 50, 0.12); color: #fbfbfb; border: 1px solid var(--c-accent); } .contact-form__status.is-erro { background: rgba(255, 138, 101, 0.1); color: #ffb39b; border: 1px solid #ff8a65; } @media (max-width: 860px) { .contact__grid, .contact-form__row { grid-template-columns: 1fr; } .contact__info { position: static; } } /* Celular: título bem maior (a maior palavra, "simplificar", ainda cabe na largura) */ @media (max-width: 600px) { .contact__title { font-size: min(3.5rem, 15vw); } } /* Serviços (/servicos/), ref. molly.studio: 1ª tela só com o título, sobre degradê cinza → branco */ .services-hero { display: grid; place-items: center; min-height: 100svh; padding: 7rem 0 4rem; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #e6e6e6 0%, #f1f1f1 40%, var(--c-bg) 80%); } .services-hero__title { font-size: var(--fs-display); line-height: var(--lh-display); } .services-hero__lead { max-width: 44rem; margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0; font-size: var(--fs-lead); opacity: 0.85; } .services-hero__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); } /* Quadro grande cinza-claro com as abas em cima e o painel dentro */ .svc { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); } .svc__frame { padding: clamp(1.25rem, 0.5rem + 3.5vw, 4.5rem); border-radius: calc(var(--radius) * 1.5); background: radial-gradient(90% 80% at 50% 30%, #e9e9e9 0%, #efefef 45%, #f5f5f5 100%); } .svc__tabs { display: flex; gap: 0.25rem; width: fit-content; max-width: 100%; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.5rem); padding: 0.3rem; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(255, 255, 255, 0.7); } .svc__tabs::-webkit-scrollbar { display: none; } .svc__tab { flex: 0 0 auto; padding: 0.65rem 1.1rem; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); color: #5c5c5c; white-space: nowrap; cursor: pointer; transition: background-color 0.35s var(--ease), color 0.35s; } .svc__tab:hover { color: var(--c-ink); } .svc__tab.is-active { background: var(--c-ink); color: #fff; } .svc__tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* Painel: 2/5 nome, descrição e botão | 3/5 itens em duas colunas */ .svc__panel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: start; padding: 0 clamp(0rem, -1rem + 3vw, 2rem) clamp(0.5rem, 0.25rem + 1vw, 1.5rem); scroll-margin-top: 6rem; } .svc__panel[hidden] { display: none; } .svc__title { font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-h2); letter-spacing: -0.02em; } /* nome do serviço em peso médio; itens em light: hierarquia clara */ .svc__text { margin-top: 1rem; font-size: var(--fs-body); line-height: 1.35; color: #5c5c5c; } .svc__actions { margin-top: 1.75rem; } .svc__items { list-style: none; border-bottom: 1px solid rgba(18, 18, 18, 0.12); } /* um item por linha: nome em cima, explicação embaixo (hierarquia clara), separados por linha fina */ .svc__item { padding: clamp(0.85rem, 0.7rem + 0.4vw, 1.1rem) 0; border-top: 1px solid rgba(18, 18, 18, 0.12); } .svc__item-title { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.2; } .svc__item-text { margin-top: 0.2rem; font-size: var(--fs-body); line-height: 1.35; color: #5c5c5c; } /* mesmo tamanho da descrição do serviço */ @media (max-width: 860px) { .svc__panel { grid-template-columns: 1fr; } } @media (max-width: 600px) { .svc__frame { margin-inline: calc(-0.5 * var(--gutter)); } .svc__tabs { width: auto; } } @media (max-width: 860px) { .service-block__grid { grid-template-columns: 1fr; } .service-block__head { position: static; } .service-item { grid-template-columns: 1fr; } } /* Sobre (/sobre/) — primeira proposta --------------------------------------------- */ .about-hero { padding: 10rem 0 clamp(2rem, 1rem + 2vw, 3rem); } /* Carrossel 3D (ref. Komma Komma): 12 colunas em anel, giradas em volta do centro, em perspectiva */ .about-ring { height: 100svh; min-height: 34rem; overflow: hidden; display: grid; place-items: center; font-size: clamp(0.55rem, 0.2rem + 0.9vw, 1rem); perspective: 90vw; } .about-ring__stage { position: relative; width: 13em; height: 39em; transform-style: preserve-3d; transform: translateZ(-30em); } .about-ring__spin { position: absolute; inset: 0; transform-style: preserve-3d; } .about-ring__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.75em; transform: rotateY(calc(var(--i) * 30deg)) translateZ(30em); backface-visibility: hidden; } .about-ring__panel:nth-child(even) { justify-content: center; } .about-ring__item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.75em; background: #e6e6e6; } .about-ring__item img { width: 100%; height: 100%; object-fit: cover; } .about-hero .tag { margin-bottom: 1.5rem; } .about-hero__title { font-size: clamp(2.25rem, 1.25rem + 3.2vw, 4.25rem); font-weight: var(--fw-light); line-height: 1.02; letter-spacing: -0.04em; } .about-hero__lead { max-width: 40rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); font-size: var(--fs-lead); color: #5c5c5c; } .about-hero__cta { margin-top: 2rem; } /* Manifesto: frase grande que acende palavra por palavra */ .about-manifesto { padding-block: clamp(6rem, 4rem + 8vw, 12rem) clamp(3rem, 2rem + 3vw, 5rem); } .about-manifesto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem clamp(2rem, 1rem + 4vw, 6rem); align-items: start; } .about-manifesto__label { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-dark-soft); } /* ref. Bold: 'Our philosophy' no canto, texto à direita */ .about-manifesto__text { max-width: 60rem; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); font-weight: var(--fw-light); line-height: 1.12; letter-spacing: -0.025em; } .about-manifesto__text .line-block { display: block; } .about-manifesto__text .line-block + .line-block { margin-top: 0.5em; } /* Números (ref. Bold): contam ao aparecer */ .about-numbers { padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(6rem, 4rem + 6vw, 10rem); } .about-numbers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem); } .about-number { padding-top: 1.5rem; border-top: 1px solid #2e2e2e; } .about-number__value { font-size: clamp(3.5rem, 2rem + 5vw, 7rem); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.05em; color: var(--c-accent); } .about-number__label { margin-top: 0.5rem; font-size: var(--fs-h4); font-weight: var(--fw-medium); } .about-number__text { max-width: 22rem; margin-top: 0.5rem; color: var(--c-dark-soft); } /* Método: três passos, a barra de cima enche com a rolagem */ /* Blocos do ícone Fracto num grid 4×4 trocando de lugar (main.js) */ .blocks { position: relative; width: clamp(5.5rem, 4rem + 4vw, 8rem); aspect-ratio: 1; margin-bottom: 2rem; } .blocks__cell { position: absolute; left: 0; top: 0; width: 25%; height: 25%; background: var(--c-ink); transform: translate(calc(var(--x, 0) * 100%), calc(var(--y, 0) * 100%)); transition: transform 0.9s var(--ease), opacity 0.5s; } .blocks__cell--accent { z-index: 1; background: var(--c-accent); } .blocks__cell.is-off { opacity: 0; } .about-method__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 1rem + 4vw, 6rem); align-items: start; } .about-method__aside { position: sticky; top: calc(var(--hdr-top, 3rem) + 6rem); } .blocks--lg { width: clamp(8rem, 5rem + 8vw, 14rem); margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; } .about-method__steps { list-style: none; } .about-step { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.25; transition: opacity 0.6s var(--ease); } .about-step.is-active { opacity: 1; } .about-step__title { font-size: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.04em; } .about-step__text { max-width: 28rem; margin-top: 1.25rem; font-size: var(--fs-lead); color: #5c5c5c; line-height: 1.35; } /* Valores: título à esquerda, lista à direita */ .about-values__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem clamp(2rem, 1rem + 4vw, 6rem); align-items: start; } .about-values__title { position: sticky; top: calc(var(--hdr-top, 3rem) + 5rem); } .about-values__list { list-style: none; border-top: 1px solid rgba(18, 18, 18, 0.12); } .about-value { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.5rem 2rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0; border-bottom: 1px solid rgba(18, 18, 18, 0.12); transition: padding-left 0.5s var(--ease); } .about-value__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-h3); transition: color 0.3s; } .about-value__text { color: #5c5c5c; line-height: 1.35; } @media (hover: hover) { .about-value:hover { padding-left: 1rem; } .about-value:hover .about-value__title { color: var(--c-accent); } } /* Time (ref. Komma Komma): retratos grandes, nome e cargo embaixo, LinkedIn */ .about-team__lead { max-width: 34rem; margin: 1rem auto 0; font-size: var(--fs-lead); color: #5c5c5c; } .about-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1rem, 0.5rem + 1.5vw, 2rem); list-style: none; } .person__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--radius); background: #e6e6e6; } .person__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.6s, transform 1s var(--ease); } .person:hover .person__photo img { filter: none; transform: scale(1.03); } .person__placeholder { position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1; background: #d4d4d4; transform: translate(-50%, -50%); transition: background-color 0.4s; } .person:hover .person__placeholder { background: var(--c-accent); } .person__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-top: 1rem; } .person__name { font-size: var(--fs-h4); font-weight: var(--fw-medium); } .person__role { margin-top: 0.2rem; font-size: var(--fs-small); color: #8a8a8a; } .person__link { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border: 1px solid var(--c-line); border-radius: 50%; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-ink); text-decoration: none; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } a.person__link:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } @media (max-width: 860px) { .about-manifesto__grid, .about-numbers__grid, .about-method__grid, .about-values__grid, .about-team__grid { grid-template-columns: 1fr; } .about-method__aside { position: static; } .about-step { min-height: 0; padding-block: 2rem; opacity: 1; } .about-values__title { position: static; } .about-value { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 860px) { .about-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Projeto do portfólio (referência Komma Komma, fundo branco) ------------- */ .project-hero { padding-top: clamp(8rem, 6rem + 6vw, 11rem); } .project-hero__title { font-size: clamp(2.75rem, 1.6rem + 5vw, 6.5rem); font-weight: var(--fw-medium); line-height: 1; letter-spacing: -0.045em; text-align: center; } /* Duas colunas: Serviço | Entregáveis (rótulo em cima, conteúdo embaixo) */ .project-meta { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem clamp(1.5rem, 1rem + 3vw, 5rem); margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 1.5rem; font-size: var(--fs-small); } .project-meta dt { margin-bottom: 0.35rem; color: #8a8a8a; } .project-meta dd { margin: 0; font-weight: var(--fw-medium); text-wrap: pretty; } @media (max-width: 760px) { .project-meta { grid-template-columns: 1fr; } } .case-media { overflow: hidden; margin: 0; border-radius: var(--radius); background: var(--c-surface); } .case-media img { width: 100%; height: 100%; object-fit: cover; } .case-media--wide { aspect-ratio: 16 / 9; } .case-media--square { aspect-ratio: 1; } .project-hero__media { margin: 0; } .case-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 5rem); padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); } @media (max-width: 760px) { .case-row { grid-template-columns: 1fr; } } .case-row__label { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-h2); letter-spacing: -0.02em; } .case-row__lead { margin-bottom: 1.25rem; font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: 1.35; } .case-row .prose { font-size: var(--fs-body); line-height: var(--lh-longform); color: #3d3d3d; } .case-details { margin: 0; border-top: 1px solid var(--c-line); } /* Coluna de rótulos só do tamanho da maior palavra: o valor ganha largura sem sair do grid */ .case-details { --label-w: 8.5rem; } .case-details > div { display: grid; grid-template-columns: var(--label-w) 1fr; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); } .case-details dt { color: #8a8a8a; } .case-details dd { margin: 0; font-weight: var(--fw-medium); text-wrap: balance; } .case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); } @media (max-width: 640px) { .case-pair { grid-template-columns: 1fr; } } .case-block--last { padding-bottom: clamp(4rem, 3rem + 4vw, 8rem); } /* Próximo projeto: rolar abre a moldura e leva até ele */ .next-project { height: 190vh; padding-top: clamp(4rem, 3rem + 4vw, 8rem); } .next-project__sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem); } .next-project__frame { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius); background: #161616; color: #fff; text-decoration: none; clip-path: inset(12% 16% 12% 16% round 24px); } .next-project__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); } .next-project__frame::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.32); } .next-project__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .next-project__label { font-size: var(--fs-small); opacity: 0.85; } .next-project__content .tag { margin: 0.25rem 0 0; } .next-project__title { font-size: clamp(2.75rem, 1.6rem + 5vw, 6.5rem); font-weight: var(--fw-medium); line-height: 1; letter-spacing: -0.045em; } .next-project__bar { width: min(22rem, 60vw); height: 2px; margin-top: 0.75rem; background: rgba(255,255,255,0.3); } .next-project__bar span { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; } /* Sem JS: bloco simples e clicável */ html:not(.js) .next-project { height: auto; } html:not(.js) .next-project__frame { clip-path: none; height: 70vh; } /* Transição de chegada: a capa encolhe da tela cheia até a posição da imagem principal */ .cover-transition { position: fixed; z-index: 95; background-size: cover; background-position: center; pointer-events: none; } /* Fundo muda com a rolagem também no projeto: branco → preto ao chegar no próximo */ .single-case { --page-bg: #fbfbfb; --page-ink: var(--c-ink); background: var(--page-bg); color: var(--page-ink); } .single-case .case-details, .single-case .case-details > div { border-color: color-mix(in srgb, currentColor 14%, transparent); } /* Post -------------------------------------------------------------------- */ /* Texto mais perto do menu (a página começava muito para baixo) */ .post-hero { padding-top: clamp(6.5rem, 5rem + 3vw, 8.5rem); } .post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: var(--fs-sm); color: var(--c-ink-soft); } .post-hero__meta .tag { margin: 0; border-color: var(--c-accent); color: var(--c-accent); } /* Mesma grade do corpo do post (índice | texto), para o topo ficar alinhado com as colunas de baixo */ .post-hero__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(1.5rem, 1rem + 3vw, 5rem); align-items: start; } .post-hero__grid .post-hero__meta { margin: 0.35rem 0 0; } .post-hero__grid .post-hero__head { max-width: 46rem; } @media (max-width: 860px) { .post-hero__grid { grid-template-columns: minmax(0, 1fr); } .post-hero__grid .post-hero__meta { margin: 0 0 1.5rem; } } .post-hero__title { font-size: calc(var(--fs-h2) + 3px); letter-spacing: -0.035em; } /* exceção do guia: título do post 3 px maior que o H2 */ .post-hero__lead { margin-top: 1.5rem; font-size: var(--fs-lg); color: var(--c-ink-soft); } /* A moldura arredondada recorta a imagem; o parallax mexe só a imagem dentro dela (cantos sempre redondos) */ .post-hero__media { overflow: hidden; isolation: isolate; aspect-ratio: 16 / 8; margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0; border-radius: var(--radius); background: var(--c-surface); } .post-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); } /* Barra de leitura: linha laranja no topo da tela que enche conforme o texto é lido */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; pointer-events: none; } .reading-progress span { display: block; height: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: left; } .post .container--narrow { padding-block: 0; } /* Corpo do post: índice "Navegue por tópicos" fixo à esquerda e o texto à direita (referência Aurum) */ .post-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 1rem + 3vw, 5rem); align-items: start; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .post-body--no-toc { grid-template-columns: minmax(0, 1fr); } .post-content { max-width: 46rem; } .post-body--no-toc .post-content { margin-inline: auto; } .post-toc { position: sticky; top: calc(var(--hdr-top, 3rem) + 5rem); max-height: calc(100vh - 9rem); overflow: auto; } .post-toc__title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: var(--fs-small); color: #8a8a8a; list-style: none; cursor: default; } .post-toc__title::-webkit-details-marker { display: none; } @media (max-width: 860px) { .post-body { grid-template-columns: minmax(0, 1fr); } /* no celular o índice abre e fecha, numa caixa com contorno */ .post-toc { position: static; max-height: none; padding: 0 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); } .post-toc__title { margin: 0; padding: 0.9rem 0; font-weight: var(--fw-medium); color: var(--c-ink); cursor: pointer; } .post-toc__title::after { content: "+"; font-size: 1.25rem; font-weight: var(--fw-regular); color: var(--c-accent); } .post-toc[open] .post-toc__title::after { content: "−"; } .post-toc .document-toc__list { margin-bottom: 1rem; } } /* Continue lendo: faixa cinza-clara de ponta a ponta com 3 posts */ .related { position: relative; padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: #efefef; } /* recorte em seta para baixo no topo da faixa (referência Aurum): "continue lendo" */ .related::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 1.25rem solid transparent; border-bottom: 0; border-top-color: var(--c-bg); } .related__head { margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); } /* No celular os cards empilham: mais espaço entre eles, para cada texto ficar claramente com a sua imagem */ @media (max-width: 640px) { .grid--3 { row-gap: 3rem; } } .related__lead { margin-top: 0.75rem; max-width: 36rem; font-size: var(--fs-lead); color: #5c5c5c; } /* Texto corrido (posts, cases, serviços) --------------------------------- */ .prose { font-size: 1.125rem; line-height: var(--lh-longform); } /* artigos longos: entrelinha um pouco maior que o corpo (1.3) */ .prose > * + * { margin-top: 1.25em; } .prose h2 { margin-top: 2.2em; font-size: var(--fs-xl); line-height: 1.2; } .prose h3 { margin-top: 1.8em; font-size: var(--fs-lg); line-height: 1.3; } .prose h4 { margin-top: 1.6em; font-size: var(--fs-base); } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.35em; } /* o texto fica colado ao seu título: mostra que pertence a ele */ .prose a:not(.btn) { color: var(--c-accent); text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li + li { margin-top: 0.4em; } .prose ul { list-style-type: square; } /* marcador quadrado: linguagem da marca (os blocos do ícone Fracto) */ .prose li::marker { color: var(--c-accent); } .prose img { border-radius: var(--radius-sm); } .prose figure { margin-inline: 0; } .prose figcaption { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--c-ink-soft); } .prose blockquote { margin-inline: 0; padding-left: 1.5rem; border-left: 3px solid var(--c-accent); font-size: var(--fs-lg); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .prose th, .prose td { padding: 0.75rem; border-bottom: 1px solid var(--c-line); text-align: left; } .prose--lg { font-size: var(--fs-lg); } .section--dark .prose { color: var(--c-dark-ink); } /* Banner CTA: um só estilo em todo o site (meio e fim do post usam o mesmo) ------------ */ .cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-block: 3rem !important; padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); border-radius: var(--radius); background: var(--c-dark); color: var(--c-dark-ink); position: relative; overflow: hidden; } .cta-banner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 30%; background: var(--c-accent); opacity: 0.9; transform: rotate(18deg); pointer-events: none; } .cta-banner__body { position: relative; z-index: 1; max-width: 32rem; } .cta-banner__title { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; } /* título bem maior que a descrição */ .cta-banner__text { margin-top: 0.75rem; color: var(--c-dark-soft); font-size: var(--fs-body); line-height: 1.35; } .cta-banner .cta { position: relative; z-index: 1; } /* Footer (referência Bold Scandinavia): 3 colunas, logo grande, direitos reservados à direita */ .site-footer { --footer-pad-top: clamp(2.5rem, 2rem + 2vw, 4rem); background: linear-gradient(180deg, #121212 0%, #282828 100%); color: var(--c-dark-ink); padding-top: var(--footer-pad-top); font-size: var(--fs-small); } /* topo enxuto, perto do espaço de baixo */ .site-footer a { text-decoration: none; transition: color 0.3s; } .site-footer a:hover { color: var(--c-accent); } .site-footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } @media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } /* Mesmo espaço entre grupos nas duas colunas (cidade → contatos = menu → redes) */ .site-footer__city { margin-bottom: var(--footer-group-gap); font-weight: var(--fw-medium); line-height: 1.4; color: #fff; } .site-footer__city span { color: var(--c-dark-soft); } .site-footer__label { color: var(--c-dark-soft); font-weight: var(--fw-medium); } /* rótulo do grupo, no tom de 'Working worldwide from' */ /* frase em cinza (tom da frase do rodapé); cidade em branco, em destaque */ .site-footer__list { list-style: none; display: grid; gap: 0.35rem; } .site-footer { --footer-group-gap: 1.25rem; } .site-footer__list + .site-footer__list { margin-top: var(--footer-group-gap); } .site-footer__pitch p { max-width: 26rem; margin-bottom: 1.25rem; color: var(--c-dark-soft); } /* Palavra "Fracto" grande à esquerda; direitos reservados à direita, na mesma linha de base */ .site-footer__bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); padding-bottom: var(--footer-pad-top); /* mesmo espaço em cima e embaixo: o conteúdo fica centralizado entre as linhas */ } .site-footer__brand { grid-column: 3; max-width: 26rem; } /* à direita, da largura do texto do rodapé */ @media (max-width: 760px) { .site-footer__bottom { grid-template-columns: 1fr; margin-top: calc(2 * var(--footer-pad-top)); } /* celular: o dobro do espaço de baixo, separando o logo do botão */ .site-footer__brand { grid-column: 1; } } /* Só o contorno das letras, no mesmo tom das linhas do rodapé */ .site-footer__brand .logo-ink { fill: none; stroke: #2e2e2e; stroke-width: 1px; vector-effect: non-scaling-stroke; } .site-footer__brand .logo { display: block; width: 100%; height: auto; } /* Linha final (mesma linha fina da home): direitos | política e cookies | CNPJ */ .site-footer__bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem 2rem; padding-block: 1.25rem; border-top: 1px solid #2e2e2e; color: var(--c-dark-soft); } .site-footer__bar-inner > :last-child { text-align: right; } .site-footer__legal { display: flex; align-items: center; gap: 0.5rem; } .site-footer__legal a, .site-footer__legal button { color: inherit; } @media (max-width: 760px) { .site-footer__bar-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .site-footer__bar-inner > :last-child { text-align: center; } } .site-footer__list span { color: var(--c-dark-soft); } /* Só na home: linha que separa o fechamento do rodapé, dentro das margens da página */ .home .site-footer > .container, .is-dark-page .site-footer > .container, .has-bg-scroll .site-footer > .container { position: relative; } .home .site-footer > .container::before, .is-dark-page .site-footer > .container::before, .has-bg-scroll .site-footer > .container::before { content: ""; position: absolute; top: calc(-1 * var(--footer-pad-top)); left: var(--gutter); right: var(--gutter); height: 1px; background: #2e2e2e; } .pagination { margin-top: 3rem; } .pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pagination .page-numbers { padding: 0.5rem 0.9rem; border: 1px solid var(--c-line); border-radius: 999px; text-decoration: none; } .pagination .current { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); } /* Animações --------------------------------------------------------------- */ /* Estados iniciais só com JS ativo (classe .js no ), para não esconder conteúdo sem JS. */ .js [data-reveal] { opacity: 0; transform: translateY(28px); } .js [data-split] .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } .js [data-split] .line__inner { display: block; transform: translateY(105%); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } .js [data-split] .line__inner { transform: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================================== Botão com seta separada (referência Nanograno) ========================================================================== */ .cta { --cta-bg: var(--c-accent); --cta-ink: #fff; --cta-bg-hover: var(--c-ink); --cta-ink-hover: #fff; --cta-h: 3rem; --cta-pad: 1.5rem; --cta-fs: var(--fs-small); --cta-arrow: 1.15rem; /* um tamanho só em todo o site */ display: inline-flex; align-items: center; gap: 2px; font: 500 var(--cta-fs)/1 var(--font); text-decoration: none; color: var(--cta-ink); -webkit-tap-highlight-color: transparent; } button.cta { padding: 0; border: 0; background: none; cursor: pointer; } /* fracto_cta_button(): mesmo visual do link */ .cta__label, .cta__icon { display: inline-flex; align-items: center; justify-content: center; height: var(--cta-h); border-radius: 999px; background: var(--cta-bg); color: var(--cta-ink); transition: background-color 0.45s var(--ease), color 0.45s var(--ease), transform 0.55s var(--ease), box-shadow 0.45s var(--ease); } .cta__label { padding: 0 var(--cta-pad); white-space: nowrap; } .cta__icon { position: relative; width: var(--cta-h); overflow: hidden; } .cta__arrow { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.55s var(--ease); } .cta__arrow svg { width: var(--cta-arrow); height: var(--cta-arrow); } .cta__arrow--next { transform: translateX(-120%); } .cta:hover .cta__label, .cta:focus-visible .cta__label, .cta:hover .cta__icon, .cta:focus-visible .cta__icon { background: var(--cta-bg-hover); color: var(--cta-ink-hover); } .cta:hover .cta__icon, .cta:focus-visible .cta__icon { transform: translateX(0.5rem) rotate(0deg); } .cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translateX(120%); } .cta:hover .cta__arrow--next, .cta:focus-visible .cta__arrow--next { transform: translateX(0); } .cta:focus-visible { outline: none; } .cta:focus-visible .cta__label { box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent); } .cta--dark { --cta-bg: var(--c-ink); --cta-ink: #fff; --cta-bg-hover: var(--c-accent); } .cta--light { --cta-bg: #fff; --cta-ink: var(--c-ink); --cta-bg-hover: var(--c-accent); --cta-ink-hover: #fff; } :is(.is-dark-page, .site-header.is-dark, .section--dark, .closing, .cta-banner, .site-footer, .home-hero) .cta--accent:is(:hover, :focus-visible) :is(.cta__label, .cta__icon) { background: transparent; color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); /* fundo escuro: no mouse o botão vira contorno laranja (preto sumiria) */ } /* Sobre foto (destaque do Conteúdo) o contorno se perderia na imagem: no mouse o botão fica branco, texto e seta laranja */ .blog-feature .cta--accent:is(:hover, :focus-visible) :is(.cta__label, .cta__icon) { background: #fff; color: var(--c-accent); box-shadow: none; } /* Botão que leva para baixo na mesma página: seta para baixo e a passagem é vertical */ .cta--down .cta__arrow svg { transform: rotate(90deg); } .cta--down .cta__arrow--next { transform: translateY(-120%); } .cta--down:hover .cta__arrow, .cta--down:focus-visible .cta__arrow { transform: translateY(120%); } .cta--down:hover .cta__arrow--next, .cta--down:focus-visible .cta__arrow--next { transform: translateY(0); } .cta--down:hover .cta__icon, .cta--down:focus-visible .cta__icon { transform: translateY(0.25rem); } .cta--outline { --cta-bg: transparent; --cta-ink: currentColor; --cta-bg-hover: var(--c-accent); --cta-ink-hover: #fff; color: inherit; } .cta--outline .cta__label, .cta--outline .cta__icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); } .cta--outline:hover .cta__label, .cta--outline:hover .cta__icon { box-shadow: none; } /* Celular: um pouco menores, para não ficarem maiores que os títulos (mesmo tamanho para todos) */ @media (max-width: 600px) { .cta { --cta-h: 2.75rem; --cta-pad: 1.15rem; --cta-arrow: 1.05rem; } } /* ========================================================================== Home ========================================================================== */ /* Fundo da página muda com a rolagem (main.js anima --page-bg / --page-ink). */ .home { --page-bg: #121212; --page-ink: #fbfbfb; background: var(--page-bg); color: var(--page-ink); } .has-bg-scroll { --page-bg: #fbfbfb; --page-ink: #121212; background: var(--page-bg); color: var(--page-ink); } .home .section--dark, .home .closing, .home .statement, .has-bg-scroll .closing { background: transparent; } /* 1ª dobra: só o vídeo, dentro de uma moldura que se abre */ .home-video { height: 100svh; padding: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem); } .home-video__frame { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius); background: #161616; clip-path: inset(0 round var(--radius)); } .home-video__frame video { width: 100%; height: 100%; object-fit: cover; } .home-video__placeholder { position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 20%, rgba(234,93,50,0.55), transparent 60%), radial-gradient(50% 60% at 15% 90%, rgba(234,93,50,0.25), transparent 60%), #161616; animation: hero-drift 18s ease-in-out infinite alternate; } .home-video__placeholder span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.45rem 0.9rem; border: 1px dashed rgba(255,255,255,0.4); border-radius: 999px; font-size: var(--fs-tag); color: rgba(255,255,255,0.65); } @keyframes hero-drift { to { background-position: 30% 10%, 60% 70%, 0 0; filter: hue-rotate(-8deg); } } /* 2ª dobra: a frase principal (H1) */ .statement { padding-block: clamp(6rem, 4rem + 8vw, 12rem); text-align: center; } .statement__inner { max-width: 60rem; } .statement__title { margin-inline: auto; } /* Quebra de linha só do computador: no celular a frase corre inteira, como um bloco só (sem linha com palavra sozinha). */ @media (max-width: 600px) { .br-desktop { display: none; } .statement__title { text-wrap: balance; } } /* balance: linhas de tamanho parecido, sem 'negócio.' sozinho */ .statement__lead { max-width: 44rem; margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0; font-size: var(--fs-lead); opacity: 0.85; } .statement__lead strong { font-weight: var(--fw-semibold); } .statement__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); } /* Logos: uma faixa de ponta a ponta que some aos poucos no branco dos dois lados */ .logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); } .logo-marquee__track { display: flex; width: max-content; list-style: none; animation: logo-marquee 50s linear infinite; } .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; } /* margem (e não gap) para as duas metades terem a mesma largura exata */ .logo-marquee__item { flex: 0 0 auto; width: clamp(150px, 10vw + 60px, 230px); margin-right: clamp(1rem, 0.5rem + 2vw, 2.5rem); } .logo-marquee__item img { display: block; width: 100%; height: auto; transform: scale(var(--logo-scale, 1)); } /* escala óptica: fracto_clients() */ @keyframes logo-marquee { to { transform: translateX(-50%); } } /* Projetos: texto à esquerda alinhado ao topo da imagem; cada projeto sobe por cima do anterior, que encolhe, escurece e esconde o texto (nada se encosta). */ .showcase { display: grid; } .showcase__item { position: sticky; top: clamp(6rem, 4.5rem + 4vw, 9rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); transform-origin: 50% 0; will-change: transform; /* sem fundo: só as imagens se sobrepõem */ } .showcase__item:last-child { margin-bottom: 0; } .showcase__info { padding-top: 0.25rem; } .showcase__media { isolation: isolate; } /* recorte limpo nos cantos durante a escala */ .showcase__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); } .showcase__title a { text-decoration: none; } .showcase__title a:hover { color: var(--c-accent); } .showcase__text { max-width: 26rem; margin-top: 0.6rem; color: #6a6a6a; font-size: var(--fs-body); line-height: 1.4; } @media (min-width: 761px) { .showcase__text { font-size: 0.9375rem; line-height: 1.2; } } /* computador: 15px / 1.2 */ .showcase__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; } .showcase__tags .tag { margin: 0; } .showcase__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: #1d1d1d; } .showcase__media img { width: 100%; height: 100%; object-fit: cover; } .showcase__media::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade, 0); pointer-events: none; } .projects__cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } @media (max-width: 760px) { .showcase__item { position: static; grid-template-columns: 1fr; gap: 1rem; } .showcase__info { order: 2; } } /* Nossas soluções (referência: wearecollins.com): título à esquerda; tabela em acordeão. Linha fechada: número + solução | para quem é | +. Aberta: texto de apoio e botão "Saiba mais" (leva à parte certa da página de serviços). Todas começam fechadas; no mouse a linha abre e um fundo cinza-claro desliza até ela (main.js). */ .services__list { position: relative; list-style: none; } /* A linha de cima pertence à primeira linha da tabela, para entrar animada junto com ela */ .service:first-of-type { border-top: 1px solid var(--c-line); } .services__hl { position: absolute; left: -0.75rem; right: -0.75rem; top: 0; height: 0; z-index: 0; border-radius: var(--radius-sm); background: #efefef; opacity: 0; pointer-events: none; transition: transform 0.5s var(--ease), height 0.5s var(--ease), opacity 0.3s; } .service { --service-cols: minmax(0, 5fr) minmax(0, 6fr) 1.75rem; position: relative; z-index: 1; border-bottom: 1px solid var(--c-line); } .service__heading { font: inherit; } .service__head, .service__inner { display: grid; grid-template-columns: var(--service-cols); column-gap: var(--gutter); } .service__head { align-items: center; width: 100%; padding: clamp(1rem, 0.8rem + 0.6vw, 1.4rem) 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; } .service__head, .service__body { transition: opacity 0.3s var(--ease), color 0.3s; } .service__main { display: flex; align-items: center; gap: 0.75rem; transition: transform 0.5s var(--ease); } .service__index { font-size: var(--fs-small); line-height: 1; font-weight: var(--fw-medium); color: var(--c-accent); } .service__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-h3); } .service__for { color: #8a8a8a; transition: color 0.3s; } /* cinza: abaixo do título na hierarquia */ /* + que vira − quando aberto */ .service__toggle { position: relative; justify-self: end; width: 1.75rem; height: 1.75rem; transition: transform 0.5s var(--ease); } .service__toggle::before, .service__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.9rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.5s var(--ease); } .service__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .service.is-open .service__toggle::after { transform: translate(-50%, -50%) rotate(0deg); } .service__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease), opacity 0.3s var(--ease), color 0.3s; } .service.is-open .service__body { grid-template-rows: 1fr; } .service__inner { overflow: hidden; } .service__text, .service__text, .service__more { grid-column: 2; } .service__more { justify-self: start; margin: 1rem 0 clamp(1rem, 0.8rem + 0.6vw, 1.4rem); } @media (hover: hover) { .services__list.is-hovering .service__head, .services__list.is-hovering .service__body { opacity: 0.4; } .services__list.is-hovering .is-hover .service__head, .services__list.is-hovering .is-hover .service__body { opacity: 1; } .service.is-hover { border-color: transparent; } .service.is-hover .service__main { transform: translateX(1rem); } .service.is-hover .service__toggle { transform: translateX(-1rem); } } .service__head:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: var(--radius-sm); } @media (max-width: 760px) { .service { --service-cols: minmax(0, 1fr) 1.75rem; } .service__head { row-gap: 0.35rem; } .service__for { grid-row: 2; padding-left: 1.75rem; } .service__toggle { grid-row: 1; grid-column: 2; } .service__text, .service__more { grid-column: 1; padding-left: 1.75rem; } } /* Fechamento: animação 3D dos cubos (a mesma do site atual) */ .closing { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 3rem + 5vw, 8rem); } .closing__grid { position: relative; } .closing__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 1rem + 4vw, 6rem); } @media (max-width: 860px) { .closing__grid { grid-template-columns: 1fr; } } .closing__art { position: relative; aspect-ratio: 1; max-height: 34rem; } .closing__logo { position: absolute; inset: 0; } .closing__logo [data-fracto-3d] { height: 100%; min-height: 0; } .closing__title .line-block { display: block; } .closing__title { margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-h2); letter-spacing: -0.02em; } @media (prefers-reduced-motion: reduce) { .home-video__placeholder, .logo-marquee__track { animation: none; } } /* Guia de estilo */ .styleguide__intro { margin-top: 1rem; color: var(--c-ink-soft); } .styleguide__row { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; align-items: baseline; padding-block: 2rem; border-top: 1px solid var(--c-line); } @media (max-width: 760px) { .styleguide__row { grid-template-columns: 1fr; gap: 1rem; } } .styleguide__spec { margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); } .styleguide__spec dt { margin-bottom: 0.4rem; font-weight: var(--fw-semibold); color: var(--c-ink); } .styleguide__spec dd { margin: 0; } .styleguide__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .menu__panel:focus { outline: none; } /* ========================================================================== Aviso de cookies (inc/consent.php): cartão no canto inferior direito, no visual do site ========================================================================== */ .consent { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 80; /* à direita: não cobre títulos e textos, que ficam à esquerda */ width: min(27rem, calc(100vw - 2 * var(--gutter))); padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; color: var(--c-ink); box-shadow: 0 1.5rem 3rem -1.5rem rgba(18, 18, 18, 0.25); opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); } .consent[hidden] { display: none; } .consent.is-visible { opacity: 1; transform: none; } .consent__title { font-size: var(--fs-h4); font-weight: var(--fw-medium); } .consent__text { margin-top: 0.6rem; font-size: var(--fs-small); line-height: 1.45; color: #5c5c5c; } .consent__text a { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .consent__text a:hover { color: var(--c-accent); } .consent__prefs { display: grid; margin-top: 1rem; border-top: 1px solid var(--c-line); } .consent__prefs[hidden] { display: none; } .consent__option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); line-height: 1.35; color: #5c5c5c; cursor: pointer; } .consent__option strong { display: block; font-weight: var(--fw-semibold); color: var(--c-ink); } /* chave liga/desliga */ .consent__switch { appearance: none; flex: 0 0 auto; position: relative; width: 2.5rem; height: 1.4rem; margin: 0; border-radius: 999px; background: #dedede; cursor: pointer; transition: background-color 0.3s; } .consent__switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform 0.4s var(--ease); } .consent__switch:checked { background: var(--c-accent); } .consent__switch:checked::after { transform: translateX(1.1rem); } .consent__switch:disabled { opacity: 0.5; cursor: default; } .consent__switch:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.25rem; } .consent__actions [hidden] { display: none; } .consent__link, .site-footer__link-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .consent__link { font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } .consent__link:hover, .site-footer__link-btn:hover { color: var(--c-accent); } @media (prefers-reduced-motion: reduce) { .consent { transition: none; transform: none; } }