/* ========================================================================== BAGIN — Seções (padrões reutilizados entre páginas) ========================================================================== */ /* ---- Hero da Home ----------------------------------------------------------- */ /* Composição: título em 5 linhas à esquerda · bag grande à direita · "in" gigante cruzando o hero · 6 cubos de gelo em posições fixas */ .hero-home { --hero-w: min(100% - 2 * var(--gutter), var(--container)); /* mesma coluna do .container do site */ position: relative; min-height: max(100svh, 46rem); padding-top: calc(var(--header-h) + var(--space-8)); padding-bottom: calc(var(--space-7) + var(--wave-h) * 0.6); background: var(--bleu-celeste); /* azul claro Bagin #7CBDE0 (banner 2) */ color: var(--peacock-blue); overflow: hidden; isolation: isolate; } .hero-home__swoosh { position: absolute; z-index: -1; left: -32%; top: 16%; width: 152%; } /* após o desenho, libera a área para a flutuação do "in" não ser cortada */ .js .hero-home__swoosh.is-in { clip-path: inset(-40% -8% -40% -8%); } /* "in" animado: flutuação */ .in-anim { display: block; width: 100%; height: auto; overflow: visible; } .in-anim__main { transform-box: view-box; transform-origin: 50% 50%; animation: in-float 8s var(--ease-in-out) infinite alternate; } @keyframes in-float { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(0.5px, -1px) rotate(-0.8deg); } 100% { transform: translate(-0.4px, -0.4px) rotate(0.6deg); } } .hero-home__grid { position: relative; width: var(--hero-w); display: grid; grid-template-rows: 1fr auto; min-height: calc(max(100svh, 46rem) - var(--header-h) - var(--space-8) - var(--space-7)); } .hero-home__title { position: relative; z-index: 1; align-self: center; font-size: clamp(3.3rem, 0.6rem + 6.3vw, 6.3rem); line-height: 1; /* folga para os acentos (Í, Ú, É) não invadirem a linha de cima */ } .hero-home__title .line { display: block; white-space: nowrap; } .hero-home__product { position: absolute; z-index: 2; left: 52%; top: -2%; height: min(80%, 40rem); aspect-ratio: 1000 / 1343; } .hero-home__bag { width: 100%; height: 100%; object-fit: contain; animation: bag-float 7s var(--ease-in-out) infinite alternate; } @keyframes bag-float { from { transform: translateY(0); } to { transform: translateY(-14px); } } /* Cubos: posição e tamanho vêm de --x/--y/--s (desktop) e --xm/--ym/--sm (celular) */ /* camada alinhada à coluna central: --x e --s em % da coluna, --y em % do hero */ .hero-home__ice { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--hero-w); translate: -50% 0; pointer-events: none; } .ice { position: absolute; z-index: 0; left: var(--x); top: var(--y); width: clamp(2.75rem, var(--s), 11rem); pointer-events: none; } .ice--front { z-index: 4; } .ice img { width: 100%; animation: ice-drift var(--ice-dur, 9s) var(--ease-in-out) infinite alternate; } @keyframes ice-drift { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-16px) rotate(10deg); } } .hero-home__foot { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5); max-width: 34rem; margin-top: var(--space-6); } .hero-home__tagline { font-size: var(--fs-lead); line-height: 1.35; } .hero-home__tagline span { display: block; font-weight: 700; } .hero-home__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* Parallax em camadas ao sair da hero (referência: Osmo "parallax scrolling"). main.js escreve --hp (0 → 1 enquanto a hero sai da tela) e liga .has-hero-parallax no . Cada camada desce uma fração da própria altura: quanto maior, mais "ao fundo" ela parece. Camada 1 (70%): foto e "in" · 2 (55%): selos e gelo · 3 (40%): títulos · 4 (10%): bag. */ .has-hero-parallax .hero-photo__media, .has-hero-parallax .hero-home__swoosh { translate: 0 calc(var(--hp, 0) * 70%); } .has-hero-parallax .hero-photo__brand { translate: 0 calc(var(--hp, 0) * 55%); } .has-hero-parallax .hero-home__ice { translate: -50% calc(var(--hp, 0) * 55%); } .has-hero-parallax .hero-photo__content, .has-hero-parallax .hero-home__title { translate: 0 calc(var(--hp, 0) * 40%); } .has-hero-parallax .hero-home__product { translate: 0 calc(var(--hp, 0) * 10%); } /* escurece a hero enquanto ela sai, emendando na próxima seção (abaixo da onda) */ .has-hero-parallax .hero-home::after { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--peacock-900); opacity: calc(var(--hp, 0) * 0.55); pointer-events: none; } /* Lenis (rolagem suave) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: clip; } /* Banner da foto (o 1º, padrão): foto inteira com o lado esquerdo desfocado sob o título. Fica por cima do banner 1 e aparece com fade + leve zoom-out; .is-photo no hero ativa. */ .hero-photo { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; padding-top: var(--header-h); padding-bottom: calc(var(--wave-h) * 0.6); background: var(--peacock-blue); /* base enquanto a foto carrega */ color: var(--paper); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); } .hero-photo__media { position: absolute; inset: 0; } .hero-photo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; scale: 1.06; transition: scale 6s var(--ease-out); } /* mesma foto, desfocada e revelada só à esquerda (máscara em degradê) */ .hero-photo__media--blur { -webkit-mask-image: linear-gradient(90deg, #000 18%, transparent 46%); mask-image: linear-gradient(90deg, #000 18%, transparent 46%); } .hero-photo__media--blur img { filter: blur(14px) brightness(0.82); } /* escurece levemente atrás do título para garantir leitura */ .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(3 38 45 / 0.4), rgb(3 38 45 / 0) 55%); pointer-events: none; } .hero-photo__content { position: relative; z-index: 2; } /* Elementos da marca no banner da foto: selos em áreas livres da foto. Entram com pop em cascata quando o banner fica ativo; o selo redondo gira devagar. */ .hero-photo__brand { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-photo__el { position: absolute; height: auto; opacity: 0; transform: translateY(24px) scale(0.5); transition: opacity var(--dur-base) var(--ease-out), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); } .hero-photo__el--tem-brasil { right: 4%; top: 16%; width: clamp(6.5rem, 10vw, 10rem); } .hero-photo__el--carrega { right: 5%; top: 44%; width: clamp(6rem, 9vw, 9rem); rotate: -10deg; } .hero-photo__el--bagin { right: 5%; bottom: 16%; width: clamp(9rem, 14vw, 15rem); rotate: -4deg; } .hero-home.is-photo .hero-photo__el { opacity: 1; transform: none; } .hero-home.is-photo .hero-photo__el--tem-brasil { transition-delay: 380ms; } .hero-home.is-photo .hero-photo__el--carrega { transition-delay: 480ms; } .hero-home.is-photo .hero-photo__el--bagin { transition-delay: 580ms; } .hero-photo__el--tem-brasil { animation: sticker-spin 28s linear infinite; } .hero-photo__title .line { opacity: 0; translate: 0 0.35em; transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-slow) var(--ease-out); } .hero-home.is-photo .hero-photo { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; } .hero-home.is-photo .hero-photo__media img { scale: 1; } .hero-home.is-photo .hero-photo__title .line { opacity: 1; translate: 0 0; } .hero-home.is-photo .hero-photo__title .line:nth-child(2) { transition-delay: 80ms; } .hero-home.is-photo .hero-photo__title .line:nth-child(3) { transition-delay: 160ms; } .hero-home.is-photo .hero-photo__title .line:nth-child(4) { transition-delay: 240ms; } .hero-home.is-photo .hero-photo__title .line:nth-child(5) { transition-delay: 320ms; } .hero-home .wave { z-index: 6; } /* Indicadores do banner: pílula ativa alongada, acima da onda */ .hero-pager { position: absolute; z-index: 7; left: 50%; bottom: calc(var(--wave-h) * 0.85 + var(--space-4)); translate: -50% 0; display: flex; justify-content: flex-end; gap: var(--space-2); } .hero-pager[hidden] { display: none; } .hero-pager__dot { width: 0.75rem; height: 0.75rem; padding: 0; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 35%, transparent); color: var(--peacock-blue); cursor: pointer; transition: width var(--dur-base) var(--ease-out), background-color var(--dur-quick); } .hero-pager__dot[aria-current="true"] { width: 2.25rem; background: currentColor; } .hero-home.is-photo .hero-pager__dot { color: var(--paper); } @media (max-width: 860px) { .hero-photo { align-items: flex-start; padding-top: calc(var(--header-h) + var(--space-7)); } /* no celular a hero é alta: a foto começa abaixo do título, com fade do azul-petróleo */ .hero-photo { background: var(--peacock-blue); } .hero-photo__media { top: 24%; } .hero-photo__media img { object-position: 72% 50%; } .hero-photo__media--blur { display: none; } .hero-photo__el--tem-brasil { top: 30%; width: 5.5rem; } .hero-photo__el--carrega { top: 34%; right: auto; left: 4%; width: 5rem; } .hero-photo__el--bagin { right: 3%; bottom: 11%; width: 6rem; } .hero-photo::after { background: linear-gradient(180deg, var(--peacock-blue) 24%, rgb(4 69 83 / 0) 38%); } .hero-pager { justify-content: center; } } @media (max-width: 860px) { .hero-home { padding-top: calc(var(--header-h) + var(--space-7)); } .hero-home__grid { grid-template-rows: auto auto auto; min-height: 0; } .hero-home__product { position: relative; left: auto; top: auto; height: min(22rem, 46svh); margin: var(--space-6) auto 0; } .hero-home__swoosh { left: -95%; top: 30%; width: 290%; } .ice { left: var(--xm, var(--x)); top: var(--ym, var(--y)); width: var(--sm, 3rem); } .manifesto-card { height: min(64vh, 30rem); } } /* ---- Trilho horizontal (manifesto) ----------------------------------------- */ .htrack { position: relative; background: var(--paper); } .htrack__sticky { overflow: hidden; } .htrack.is-pinned .htrack__sticky { position: sticky; top: var(--pin-top, 0px); /* calculados em main.js: altura do conteúdo, centralizada na tela */ height: var(--pin-h, 100vh); display: flex; align-items: center; } .htrack__inner { display: flex; align-items: center; /* alturas variáveis centradas */ gap: var(--space-5); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); will-change: transform; } .htrack:not(.is-pinned) .htrack__inner { overflow-x: auto; scroll-snap-type: x mandatory; padding-block: var(--section-y); scrollbar-width: none; } .htrack:not(.is-pinned) .htrack__inner::-webkit-scrollbar { display: none; } .htrack__intro { flex: none; width: min(26rem, 80vw); align-self: center; scroll-snap-align: start; } .htrack__intro .h2 { margin-top: var(--space-4); } .htrack__intro p:last-child { margin-top: var(--space-5); } .manifesto-card { --card-bg: var(--peacock-blue); position: relative; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); /* tamanhos reduzidos em 20% (eram 30rem / 72vh·40rem / padding 1.75–3.5rem) */ width: min(24rem, 84vw); height: calc(min(57.6vh, 32rem) * 0.92); /* cards lisos um pouco mais baixos que os de foto (referência) */ padding: clamp(1.4rem, 2.4vw, 2.8rem); border-radius: var(--radius-lg); background: var(--card-bg); color: var(--paper); overflow: hidden; scroll-snap-align: start; isolation: isolate; } .manifesto-card--photo { width: min(38.4rem, 84vw); height: min(57.6vh, 32rem); } .manifesto-card--magenta { --card-bg: var(--pastel-magenta); color: var(--peacock-blue); } .manifesto-card__text { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 0.96rem + 1.84vw, 2.88rem); line-height: 1.02; /* folga para os acentos */ letter-spacing: var(--tracking-display); text-wrap: balance; } .manifesto-card__img { position: absolute; inset: 0; z-index: -2; } .manifesto-card__img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); } .manifesto-card:hover .manifesto-card__img img { scale: 1.04; } .manifesto-card--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(3 38 45 / 0.55) 0%, rgb(3 38 45 / 0) 45%, rgb(3 38 45 / 0.55) 100%); } .manifesto-card .in-mark { width: 4.4rem; } .manifesto-card .btn { align-self: flex-start; } /* ---- Cabeçalho de seção ------------------------------------------------------ */ .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section-head__title { max-width: min(100%, 50rem); } .section-head__title .h2 { margin-top: var(--space-4); } /* ---- Momento de marca (painel contido) ------------------------------------ Painel em Peacock com cantos arredondados, limitado ao container. Fotos de Momentos Bagin, o "in" com as taglines cruzando por cima e selos cortados pelas bordas do painel. Posições em % do painel (--x/--y/--w; celular: --xm/--ym/--wm). */ .brand-moment { padding-block: calc(var(--section-y) * 0.5); } .brand-moment__panel { position: relative; aspect-ratio: 849 / 527; border-radius: var(--radius-lg); background: var(--peacock-blue); overflow: hidden; isolation: isolate; } .brand-moment__photo { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; } .brand-moment__photo img { width: 100%; height: 100%; object-fit: cover; } .brand-moment__swoosh { position: absolute; z-index: 2; left: 50%; top: 50%; width: 124%; max-width: none; translate: -50% -47%; pointer-events: none; } .brand-moment__item { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r, 0deg); pointer-events: none; } .brand-moment__item--spin { animation: sticker-spin 28s linear infinite; } @media (max-width: 860px) { .brand-moment__panel { aspect-ratio: 3 / 4; } .brand-moment__photo, .brand-moment__item { left: var(--xm, var(--x)); top: var(--ym, var(--y)); width: var(--wm, var(--w)); } .brand-moment__swoosh { width: 190%; translate: -50% -50%; } } @media (prefers-reduced-motion: reduce) { .brand-moment__item--spin { animation: none; } } /* ---- Split editorial (imagem + texto) ------------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 7vw, 8rem); } .split--reverse .split__media { order: 2; } .split__media { position: relative; } .split__content > * + * { margin-top: var(--space-5); } .split__content .btn, .split__content .actions { margin-top: var(--space-6); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); } .float-obj { position: absolute; z-index: 2; width: var(--w, 8rem); } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } } /* título com linha de destaque em Tomato */ .stacked-title .accent { display: block; color: var(--tomato); } /* ---- Showcase: padrão das seções "texto + composição visual" (Home) --------- Usado por "Bagin do seu jeito" e "A Bagin te ajuda a vencer": mesmas colunas, espaçamentos, tamanho de título, texto e botão. O visual ocupa a coluna inteira. */ .showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); } .showcase__title { margin-top: var(--space-5); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 1rem + 3.4vw, 4.25rem); line-height: 1.14; letter-spacing: -0.01em; color: var(--peacock-blue); } .showcase__text { margin-top: var(--space-6); max-width: 36rem; font-size: 1.125rem; line-height: 1.8; color: var(--peacock-900); } .showcase__cta { margin-top: var(--space-6); } /* texto → CTA: 32px (padrão das seções) */ @media (max-width: 860px) { .showcase { grid-template-columns: 1fr; row-gap: var(--space-8); } .showcase__visual { order: 2; } /* no celular: texto primeiro, visual depois */ } /* ---- Bagin do seu jeito (Home) --------------------------------------------- Foto emoldurada em lima com bags flutuando e ícones desenhados ao redor. Decorações posicionadas em % da moldura: --x/--y (canto superior esquerdo), --w, --r. */ /* A composição (moldura + bags que saem dela) ocupa a coluna inteira: moldura = 57,5% da coluna; 17,2% à esquerda reservado para a bag iFood, o resto à direita. */ .jeito__stage { position: relative; width: 66%; /* +15% (era 57,5%), mantendo o mesmo centro */ margin: var(--space-4) 0 var(--space-4) 13%; } .jeito__frame { aspect-ratio: 340 / 402; padding: var(--frame-width); /* moldura como fundo + padding (ver .media--framed) */ border-radius: calc(1.75rem * var(--corner-scale)); overflow: hidden; background: var(--lime); } .jeito__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(1.75rem * var(--corner-scale) - var(--frame-width)); } .jeito__deco { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r, 0deg); pointer-events: none; } .jeito__bag { animation: jeito-float 6s var(--ease-in-out) var(--float-d, 0s) infinite alternate; } .jeito__doodle { z-index: 1; transform-origin: 50% 90%; animation: jeito-wiggle 3.2s var(--ease-in-out) infinite alternate; } @keyframes jeito-float { from { transform: translateY(0); } to { transform: translateY(-12px); } } @keyframes jeito-wiggle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } @media (prefers-reduced-motion: reduce) { .jeito__bag, .jeito__doodle { animation: none; } } /* ---- Segmentos (faixa lemon) ----------------------------------------------- */ /* overflow-y visível: a cabeça da foto sai pelo topo da seção, por cima da onda */ .segments { position: relative; overflow-x: clip; overflow-y: visible; padding-top: calc(var(--space-9) + var(--wave-h) * 0.6); padding-bottom: 0; } .segments__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; gap: var(--space-6); } /* centrado na altura da foto (antes alinhado à base, sobrava espaço em cima); a folga de baixo compensa a onda */ .segments__text { align-self: center; padding-bottom: calc(var(--wave-h) * 0.6); } .segments__cta { margin-top: var(--space-6); } .segments__person { position: relative; z-index: 4; /* acima da onda do topo */ align-self: end; justify-self: center; width: min(100%, 31rem); /* sobe além do topo: a linha da onda cruza a altura das orelhas */ margin-top: calc(var(--wave-h) * -0.1 - var(--space-9) - 7rem); } /* embaixo a onda é o limite: fica acima da foto (em cima, a foto passa por cima da onda) */ .segments .wave--bottom { z-index: 5; } .segments__person img { width: 100%; } /* selos soltos em volta da foto: --x/--y em % da caixa da foto */ .segments__tags { position: absolute; inset: 0; display: block; pointer-events: none; } .segments__tags .tag { position: absolute; z-index: 2; left: var(--x); top: var(--y); min-height: 2.75rem; padding-inline: 1.1rem; font-size: clamp(1rem, 0.75rem + 0.6vw, 1.4rem); white-space: nowrap; pointer-events: auto; } @media (max-width: 860px) { .segments__grid { grid-template-columns: 1fr; } .segments__text { padding-bottom: 0; } .segments__person { width: min(85%, 22rem); margin-top: var(--space-6); } .segments__tags .tag { left: var(--xm, var(--x)); top: var(--ym, var(--y)); min-height: 2.25rem; padding-inline: 0.85rem; } } /* ---- Galeria de momentos ---------------------------------------------------- */ .gallery { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-bottom: var(--space-4); scrollbar-width: thin; scrollbar-color: var(--peacock-blue) transparent; cursor: grab; padding-top: var(--space-4); /* folga para o hover dos itens */ } .gallery:active { cursor: grabbing; } .gallery__item { flex: none; width: clamp(15rem, 24vw, 22rem); aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; scroll-snap-align: start; background: var(--peacock-700); } .gallery__item:nth-child(3n + 2) { margin-top: var(--space-8); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); } .gallery__item:hover img { scale: 1.05; } /* ---- Redes sociais (Home) — referência: brars.com -------------------------- Fundo Bleu Celeste, selo + título centralizados, botões das redes e letreiro de fotos rolando sozinho (itens 4:5 e alguns quadrados, centrados na altura). */ .social-feed { position: relative; overflow: hidden; padding-bottom: calc(var(--space-9) + var(--wave-h) * 0.6); background: var(--bleu-celeste); /* #7CBDE0 */ color: var(--peacock-blue); text-align: center; } .social-feed__head { display: flex; flex-direction: column; align-items: center; } .social-feed__chip { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 0.6rem; background: var(--peacock-blue); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 0.85rem + 0.4vw, 1.3rem); text-transform: uppercase; letter-spacing: 0.01em; } .social-feed__title { margin-top: var(--space-5); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 0.8rem + 6.4vw, 7.5rem); line-height: 0.98; letter-spacing: var(--tracking-display); } .social-feed__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); width: 100%; margin-top: var(--space-6); } /* botões no padrão .btn--peacock (hover: preenchimento lima + sobe e gira) */ .social-link { min-width: 12rem; } /* sem URL ainda: mantém a cor e o hover (o clique é bloqueado em components.js) */ .social-feed .social-link[aria-disabled="true"] { opacity: 1; pointer-events: auto; cursor: default; } .social-link__icon { display: grid; width: 1.35rem; height: 1.35rem; } .social-link__icon svg { width: 100%; height: 100%; } .social-feed__marquee { margin-top: var(--space-8); overflow: hidden; } .social-feed__track { display: flex; align-items: center; gap: var(--space-4); width: max-content; padding-block: var(--space-3); /* folga para o hover (sobe e gira) */ animation: social-marquee var(--marquee-dur, 60s) linear infinite; } .social-feed__marquee:hover .social-feed__track { animation-play-state: paused; } @keyframes social-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } } .social-post { position: relative; flex: none; width: clamp(14rem, 24vw, 22rem); aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--peacock-700); } .social-post--square { aspect-ratio: 1; } .social-post img { width: 100%; height: 100%; object-fit: cover; } .social-post__badge { position: absolute; z-index: 1; top: 0.75rem; left: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border-radius: 0.6rem; background: rgb(5 38 45 / 0.88); color: var(--paper); font-size: var(--fs-caption); font-weight: 700; } .social-post__badge svg { width: 0.95rem; height: 0.95rem; } @media (prefers-reduced-motion: reduce) { .social-feed__track { animation: none; } .social-feed__marquee { overflow-x: auto; } } /* ---- Comunidade / winners (Home) — referência: brars.com › Careers -------- Texto centralizado; 4 avatares (cards com cantos iOS, [data-squircle]) espalhados nos cantos da seção, flutuando e com parallax; "in" grande e claro ao fundo. */ .winners { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(40rem, 30rem + 22vw, 56rem); display: grid; place-items: center; } .winners__mark { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(62rem, 80%); max-width: none; translate: -50% -50%; opacity: 0.07; pointer-events: none; } .winners__stage { position: absolute; inset: 0; } .winners__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .winners__content .showcase__title { max-width: 15ch; font-size: clamp(2.6rem, 1rem + 4.4vw, 5.5rem); text-wrap: balance; } .winners__content .showcase__text { max-width: 34rem; } @media (max-width: 860px) { .winners { min-height: 0; padding-block: calc(var(--section-y) + 30vw); } } .winner { position: absolute; left: var(--x); top: var(--y); width: var(--w); } .winner__tile { position: relative; aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; border-radius: calc(28% * var(--corner-scale)); background: var(--bg); overflow: hidden; rotate: var(--r, 0deg); animation: winner-float 5.5s var(--ease-in-out) var(--float-d, 0s) infinite alternate; transition: translate 200ms cubic-bezier(0.4, 0, 0.2, 1), rotate 200ms cubic-bezier(0.4, 0, 0.2, 1); } .winner__tile img { width: 88%; height: auto; transition: transform var(--dur-slow) var(--ease-out); } .winner:hover .winner__tile { translate: 0 -8px; rotate: calc(var(--r, 0deg) + 3deg); } /* hover padrão (Partake) */ .winner:hover .winner__tile img { transform: translateY(-4%) scale(1.04); } @keyframes winner-float { from { transform: translateY(0); } to { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .winner__tile { animation: none; } } /* celular: avatares em cima e embaixo do texto (depois da regra base de .winner) */ @media (max-width: 860px) { .winner { left: var(--xm); top: var(--ym); width: var(--wm); } } /* ---- Blog teaser ------------------------------------------------------------ */ /* Última seção da Home: painel atravessando a divisa creme / azul-petróleo (que emenda no footer) */ .blog-band { position: relative; isolation: isolate; padding-bottom: var(--space-7); } .blog-band__fill { position: absolute; left: 0; right: 0; top: 55%; bottom: 0; z-index: -1; background: var(--peacock-blue); } body[data-page="home"] .site-footer > .wave--top { display: none; } body[data-page="home"] .site-footer { padding-top: var(--space-8); } /* Painel do blog (referência): título em caixa normal e creme, botão tomate, categorias soltas */ .cta-panel--blog .kicker { color: var(--peacock-blue); } .cta-panel--blog .h2 { text-transform: none; color: var(--paper); line-height: 1.04; letter-spacing: -0.005em; } .cta-panel--blog .soon { color: var(--peacock-blue); } .blog-chips { position: relative; display: block; min-height: 20rem; } .blog-chips .tag { position: absolute; left: var(--x); top: var(--y); min-height: clamp(3rem, 2rem + 1.8vw, 4.25rem); padding-inline: clamp(1.1rem, 0.6rem + 1vw, 1.9rem); border-radius: 0.75rem; /* retângulo arredondado (referência), não pílula */ font-size: clamp(1.15rem, 0.8rem + 0.8vw, 1.85rem); white-space: nowrap; } @media (max-width: 860px) { .blog-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); min-height: 0; } .blog-chips .tag { position: static; } } /* ---- Acordeão horizontal de painéis ([data-accordion]) — referência: brars.com O item ativo ocupa a largura; os demais viram faixas verticais (--acc-bg) com o nome em pé. O painel tem largura fixa (100cqw − faixas) para não “reflowar” na animação: só a largura visível do item cresce/encolhe. */ .acc { --acc-tab: clamp(3.25rem, 2.5rem + 1.5vw, 4.25rem); --acc-gap: var(--space-2); display: flex; gap: var(--acc-gap); container-type: inline-size; } .acc-item { position: relative; flex: 0 0 var(--acc-tab); min-width: 0; overflow: hidden; border-radius: var(--radius-lg); transition: flex-grow var(--dur-slow) var(--ease-out), flex-basis var(--dur-slow) var(--ease-out); } .acc-item.is-active { flex: 1 1 var(--acc-tab); } .acc-item__tab { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; padding: 0; border: 0; border-radius: inherit; background: var(--acc-bg, var(--malachite)); color: var(--peacock-blue); cursor: pointer; transition: opacity var(--dur-base) var(--ease-out), background-color var(--dur-quick); } .acc-item__tab span { writing-mode: vertical-rl; rotate: 180deg; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem); letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; } .acc-item__tab:hover { background: color-mix(in srgb, var(--acc-bg, var(--malachite)) 85%, var(--paper)); } .acc-item.is-active .acc-item__tab { opacity: 0; pointer-events: none; } .acc-item__panel { width: calc(100cqw - (var(--acc-count, 2) - 1) * (var(--acc-tab) + var(--acc-gap))); height: 100%; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .acc-item.is-active .acc-item__panel { opacity: 1; transition-delay: 150ms; } .acc-item__panel > .cta-panel { height: 100%; } @media (max-width: 860px) { /* celular: empilha; faixas viram barras horizontais */ .acc { flex-direction: column; } .acc-item { flex: 0 0 auto; height: var(--acc-tab); } .acc-item.is-active { height: auto; } .acc-item__tab span { writing-mode: horizontal-tb; rotate: none; } .acc-item__panel { width: 100%; } } @media (prefers-reduced-motion: reduce) { .acc-item, .acc-item__tab, .acc-item__panel { transition: none; } } /* Bagin Cast: foto do convidado em moldura + play lima /* Bleu Celeste para destacar da faixa azul-petróleo atrás */ .cta-panel--cast { --panel-bg: var(--bleu-celeste); color: var(--peacock-blue); } .cta-panel--cast .kicker { color: var(--peacock-blue); } .cta-panel--cast .lead { max-width: 30rem; color: var(--peacock-blue); } .cast-visual { display: grid; place-items: center; } .cast-visual__photo { width: min(100%, 30rem); aspect-ratio: 3 / 2; /* foto horizontal (palco + plateia) */ padding: var(--frame-width); /* moldura como fundo + padding (ver .media--framed) */ border-radius: var(--radius-md); background: var(--lime); overflow: hidden; rotate: 3deg; } .cast-visual__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; border-radius: calc(var(--radius-md) - var(--frame-width)); } .cast-visual__play { position: absolute; left: 50%; top: 50%; translate: -10.5rem 3rem; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; corner-shape: round; background: var(--lime); color: var(--peacock-blue); } .cast-visual__play svg { width: 45%; translate: 8% 0; } .cast-visual__in { position: absolute; right: 0; top: 4%; width: 7rem; rotate: -8deg; } @media (max-width: 860px) { .cast-visual__play { translate: -8rem 2rem; width: 4rem; height: 4rem; } .cast-visual__in { width: 5rem; } } .soon { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.55; } /* ---- Hero de páginas internas --------------------------------------------- */ .page-hero { position: relative; display: flex; align-items: flex-end; min-height: max(88svh, 40rem); padding-top: calc(var(--header-h) + var(--space-9)); padding-bottom: clamp(3rem, 6vw, 6rem); background: var(--peacock-900); color: var(--paper); overflow: hidden; isolation: isolate; } .page-hero--short { min-height: max(70svh, 34rem); } .page-hero__bg { position: absolute; inset: -8% 0; z-index: -2; } .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .page-hero--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(5 38 45 / 0.35) 0%, rgb(5 38 45 / 0.1) 40%, rgb(5 38 45 / 0.85) 100%); } .page-hero--scrim::before { background: linear-gradient(90deg, rgb(5 38 45 / 0.9) 0%, rgb(5 38 45 / 0.6) 45%, rgb(5 38 45 / 0.05) 80%); } .page-hero__title { max-width: 14ch; } /* bloco de texto da hero à direita (texto continua alinhado à esquerda) */ .page-hero--right > .container { display: grid; grid-template-columns: 1fr minmax(0, 48rem); } .page-hero--right > .container > * { grid-column: 2; } @media (max-width: 860px) { .page-hero--right > .container { grid-template-columns: 1fr; } .page-hero--right > .container > * { grid-column: 1; } } .page-hero--right::before { background: linear-gradient(270deg, rgb(5 38 45 / 0.75) 0%, rgb(5 38 45 / 0.25) 55%, rgb(5 38 45 / 0) 80%), linear-gradient(180deg, rgb(5 38 45 / 0.3) 0%, rgb(5 38 45 / 0) 40%, rgb(5 38 45 / 0.6) 100%); } /* Visão estratégica (Estratégias): título + texto à esquerda, foto emoldurada à direita */ .visao { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; } .visao__media { margin-top: var(--space-4); } @media (max-width: 860px) { .visao { grid-template-columns: 1fr; gap: var(--space-6); } } /* CTA com pessoa saindo pela borda de cima do painel (Estratégias) */ .cta-popout-section { padding-top: clamp(6rem, 4rem + 8vw, 12rem); } .cta-panel--popout { overflow: visible; } .cta-popout { position: relative; align-self: stretch; } .cta-popout__person { position: absolute; right: 0; /* apoiado na base do painel (desconta o padding) e ~40% mais alto que ele */ bottom: calc(-1 * clamp(2rem, 1rem + 4vw, 5rem)); width: auto; height: calc(100% + 2 * clamp(2rem, 1rem + 4vw, 5rem) + clamp(5rem, 3rem + 7vw, 11rem)); max-width: none; object-fit: contain; object-position: bottom right; pointer-events: none; } @media (max-width: 860px) { .cta-popout-section { padding-top: clamp(5rem, 20vw, 8rem); } .cta-popout { min-height: 20rem; } .cta-popout__person { right: 50%; translate: 50% 0; height: calc(100% + clamp(2rem, 1rem + 4vw, 5rem) + 3rem); } } .page-hero__sub { margin-top: var(--space-6); max-width: 36rem; } .page-hero .sticker { --sticker-size: clamp(6rem, 10vw, 10rem); right: 6%; top: calc(var(--header-h) + 3.5rem); } .page-hero__swoosh { position: absolute; z-index: -1; right: -10%; bottom: 8%; width: 70%; opacity: 0.9; } .hero-bags { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-bags .float-obj { mix-blend-mode: normal; } @media (max-width: 860px) { .hero-bags .float-obj:first-child { right: 38%; top: 14%; } .hero-bags .float-obj { opacity: 0.35; } } /* ---- Citação / frase de destaque ----------------------------------------- */ .pull { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-h2); line-height: 0.98; letter-spacing: var(--tracking-display); text-wrap: balance; max-width: 20ch; } .pull .hl-tomato, .pull .hl { display: inline; } /* ---- Parceiros ------------------------------------------------------------- */ .partners { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); } .partner { display: grid; place-items: center; min-height: 4.5rem; padding: 0.9rem 1.5rem; border-radius: var(--radius-sm); background: var(--lime); color: var(--peacock-blue); font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: 0.02em; text-transform: uppercase; } .partner img { height: 2.1rem; width: auto; } .partner--malachite { background: var(--malachite); } /* ---- Grade de 12 campanhas ------------------------------------------------ */ .months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); } .month { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-4); border-radius: var(--radius-md); background: var(--m, var(--bleu-celeste)); color: var(--peacock-blue); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; transition: transform var(--dur-base) var(--ease-out); } .month__n { font-size: 0.95rem; letter-spacing: 0.08em; opacity: 0.8; } .month__name { font-size: clamp(1.4rem, 1rem + 1vw, 2.2rem); line-height: 1; } /* ---- Painel escuro (Startex) ---------------------------------------------- */ .dark-panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #05161a; color: var(--paper); isolation: isolate; } .dark-panel__bg { position: absolute; inset: 0; z-index: -2; } .dark-panel__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 0.55; } .dark-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #05161a 0%, rgb(5 22 26 / 0.92) 45%, rgb(5 22 26 / 0.2) 100%); } .dark-panel__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: var(--space-8); padding: clamp(2rem, 1rem + 5vw, 6rem); } .dark-panel__stat { align-self: end; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.75rem); line-height: 1; color: var(--lime); } .dark-panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6) clamp(2rem, 1rem + 5vw, 6rem); border-top: 1px solid var(--color-line-inverse); } @media (max-width: 860px) { .dark-panel__inner { grid-template-columns: 1fr; } } /* ---- Benefícios em círculo (Coleções) ------------------------------------ */ .benefits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); text-align: center; } .benefit { display: grid; justify-items: center; gap: var(--space-4); } .benefit__icon { display: grid; place-items: center; width: clamp(6rem, 9vw, 8.25rem); aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--bleu-celeste)); color: var(--peacock-blue); transition: transform var(--dur-base) var(--ease-out); } .benefit__icon svg { width: 44%; } .benefit__label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.08; max-width: 13ch; } @media (max-width: 1024px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-7); } } @media (max-width: 560px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .collections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 1024px) { .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .collections { grid-template-columns: 1fr; } } /* ---- Três passos com imagem (Do seu jeito) --------------------------------- */ .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .trio__item:nth-child(2) { margin-top: var(--space-9); } .trio__item:nth-child(3) { margin-top: var(--space-6); } .trio__num { display: block; margin-top: var(--space-5); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--tomato); } .trio__text { margin-top: var(--space-2); max-width: 30ch; color: var(--color-muted); } @media (max-width: 860px) { .trio { grid-template-columns: 1fr; } .trio__item:nth-child(n) { margin-top: 0; } } /* ---- Faixa de clientes -------------------------------------------------- */ .strip { border-radius: var(--radius-lg); background: var(--malachite); color: var(--cool-mint); padding-block: var(--space-7); overflow: hidden; } .strip__head { display: flex; align-items: center; gap: var(--space-4); padding-inline: var(--space-7); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .strip__head hr { flex: 1; border: 0; height: 1px; background: color-mix(in srgb, #fff 35%, transparent); } .strip .gallery { margin-top: var(--space-6); padding-inline: var(--space-7); } .strip .gallery__item { width: clamp(12rem, 17vw, 16rem); } @media (max-width: 560px) { .strip__head, .strip .gallery { padding-inline: var(--space-5); } .strip__head hr { display: none; } .strip__head { justify-content: space-between; } } /* ---- Contato --------------------------------------------------------------- */ .contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; } .contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); } .contact__card { padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--radius-lg); background: var(--cool-mint); } @media (max-width: 960px) { .contact { grid-template-columns: 1fr; } .contact__aside { position: static; } } @media (prefers-reduced-motion: reduce) { .hero-photo__media img { scale: 1; transition: none; } .hero-photo__el--tem-brasil { animation: none; } }