/* ========================================================================== Yvaz — CSS específico da Home (Hero + Sobre) Carregado só na home via carregar_estilos_dinamicos() (functions.php). Tokens, fontes, navbar e footer ficam em assets/css/style.css (global). ========================================================================== */ .yvaz-hero, .yvaz-about { box-sizing: border-box; } .yvaz-hero *, .yvaz-about * { box-sizing: border-box; } .yvaz-hero__titulo, .yvaz-hero__descricao p, .yvaz-about__word, .yvaz-about__descricao p { margin: 0; font-family: var(--yvaz-font-family); } /* ========================================================================== Hero (carrossel) ========================================================================== */ .yvaz-hero__swiper { position: relative; width: 100%; } .yvaz-hero__slide { position: relative; display: flex; align-items: flex-start; min-height: 630px; padding: var(--yvaz-space-64) var(--yvaz-space-24) var(--yvaz-space-40); background-size: cover; background-position: center; background-color: var(--yvaz-color-dark-900); } .yvaz-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.733) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; } .yvaz-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--yvaz-space-32); color: var(--yvaz-color-text-on-dark); max-width: 560px; } .yvaz-hero__logo { display: block; max-width: 191px; height: auto; margin-bottom: var(--yvaz-space-8); } .yvaz-hero__titulo { font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: 12px; text-transform: uppercase; } .yvaz-hero__descricao { font-weight: 400; font-size: var(--yvaz-font-size-body-medium); line-height: 1.6; letter-spacing: 1.8px; } .yvaz-hero__descricao p { margin-bottom: 1em; } .yvaz-hero__descricao p:last-child { margin-bottom: 0; } .yvaz-hero__localizacao { font-weight: 600; font-size: var(--yvaz-font-size-body-medium); line-height: 1.6; letter-spacing: 1.8px; } /* Paginação (Atom/Slider-Indicator) — fica a uma distância fixa do fundo da imagem, igual em todos os slides independente da quantidade de conteúdo (título/descrição/localização). A distância muda só por breakpoint. */ /* !important nas propriedades de posição/tamanho: o CSS do Swiper (swiper-bundle.min.css) define `.swiper-pagination-bullets.swiper-pagination-horizontal` com a MESMA especificidade desta regra (2 classes) e carrega depois no , então `bottom`/`width`/`left` do Swiper venceriam por ordem de cascata sem isso. */ .yvaz-hero__pagination.swiper-pagination { position: absolute; left: var(--yvaz-space-24) !important; right: auto !important; top: auto !important; bottom: 60px !important; height: auto !important; width: fit-content !important; z-index: 2; display: flex; align-items: center; gap: var(--yvaz-space-12); margin: 0; padding: 4px 12px; border-radius: var(--yvaz-radius-full); border: var(--yvaz-border-thin) solid var(--yvaz-color-white); background: rgba(214, 206, 192, 0.2); } .yvaz-hero .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0; border-radius: var(--yvaz-radius-full); background: rgba(255, 255, 255, 0.4); opacity: 1; transition: width 0.3s ease, background 0.3s ease; } .yvaz-hero .swiper-pagination-bullet-active { width: 35px; height: 9px; background: var(--yvaz-color-white); } @media (min-width: 768px) { .yvaz-hero__slide { min-height: 700px; padding: var(--yvaz-space-96) var(--yvaz-space-48) var(--yvaz-space-48); } .yvaz-hero__content { max-width: 620px; gap: var(--yvaz-space-48); } .yvaz-hero__titulo { font-size: var(--yvaz-font-size-hero); letter-spacing: 14px; } .yvaz-hero__descricao { font-size: var(--yvaz-font-size-body-large); letter-spacing: 2px; } .yvaz-hero__pagination.swiper-pagination { left: var(--yvaz-space-48) !important; bottom: 50px !important; } } @media (min-width: 1280px) { .yvaz-hero__slide { min-height: 824px; padding: var(--yvaz-space-120) var(--yvaz-space-120) var(--yvaz-space-64); } .yvaz-hero__content { max-width: 560px; gap: var(--yvaz-space-64); } .yvaz-hero__descricao { font-size: var(--yvaz-font-size-body-medium); letter-spacing: 1.8px; } .yvaz-hero__pagination.swiper-pagination { left: var(--yvaz-space-120) !important; bottom: 85px !important; } } /* ========================================================================== About ========================================================================== */ .yvaz-about { background: var(--yvaz-color-dark-800); padding: var(--yvaz-space-56) var(--yvaz-space-24); } .yvaz-about__row { display: flex; flex-direction: column; gap: var(--yvaz-space-32); max-width: 1600px; margin: 0 auto; } .yvaz-about__brand { position: relative; } .yvaz-about__word { font-size: 28px; line-height: 0.85; letter-spacing: 13.16px; color: var(--yvaz-color-text-accent); text-transform: uppercase; } .yvaz-about__word--regular { font-weight: 400; } .yvaz-about__word--ultralight { font-weight: 200; margin-top: 0.85em; } .yvaz-about__word--semibold { font-weight: 600; margin-top: 0.85em; } .yvaz-about__brand-mark { display: none; } .yvaz-about__descricao { font-weight: 300; font-size: var(--yvaz-font-size-body-small); line-height: 1.6; letter-spacing: 1.6px; color: var(--yvaz-color-text-on-dark); } .yvaz-about__descricao p { margin-bottom: 1em; } .yvaz-about__descricao p:last-child { margin-bottom: 0; } .yvaz-about__descricao strong { font-weight: 700; } @media (min-width: 768px) { .yvaz-about { padding: var(--yvaz-space-64) var(--yvaz-space-48); } .yvaz-about__word { font-size: var(--yvaz-font-size-display); letter-spacing: 15.04px; } .yvaz-about__descricao { font-size: var(--yvaz-font-size-body-medium); letter-spacing: 1.8px; } } @media (min-width: 1280px) { .yvaz-about { padding: var(--yvaz-space-72) var(--yvaz-space-120); } .yvaz-about__row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--yvaz-space-24); } /* As 3 palavras continuam empilhadas (uma coluna, .yvaz-about__words) — a marca-d'água decorativa fica ao lado, afastada do texto com um gap generoso (aproxima ela do centro da seção em vez de colada nas palavras, como no Figma). */ .yvaz-about__brand { display: flex; align-items: center; gap: var(--yvaz-space-120); } .yvaz-about__brand-mark { display: block; position: relative; width: 186px; height: 255px; flex-shrink: 0; } .yvaz-about__brand-mark img { position: absolute; top: 0; left: 0; height: 255px; width: auto; } .yvaz-about__brand-mark img:last-child { left: 35px; } .yvaz-about__descricao { max-width: 513px; } }