/* ========================================================================= D'oro Vetta: "Em breve" ========================================================================= */ /* ------------------------------------------------------------------------- Fontes licenciadas (Ivy Presto Display / Aeonik / Lizzy Handwriting). Os arquivos ainda não foram adicionados. Quando chegarem, salve-os em /assets/fonts com estes nomes (ou ajuste os caminhos abaixo). Até lá, o font-family cai automaticamente para as alternativas gratuitas do Google Fonts carregadas no do index.html. ------------------------------------------------------------------------- */ @font-face { font-family: 'Ivy Presto Display'; src: url('../assets/fonts/IvyPrestoDisplay-Regular.woff2') format('woff2'), url('../assets/fonts/IvyPrestoDisplay-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ivy Presto Display'; src: url('../assets/fonts/IvyPrestoDisplay-Semibold.woff2') format('woff2'), url('../assets/fonts/IvyPrestoDisplay-Semibold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Aeonik'; src: url('../assets/fonts/Aeonik-Regular.woff2') format('woff2'), url('../assets/fonts/Aeonik-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Aeonik'; src: url('../assets/fonts/Aeonik-Medium.woff2') format('woff2'), url('../assets/fonts/Aeonik-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Lizzy Handwriting'; src: url('../assets/fonts/LizzyHandwriting.woff2') format('woff2'), url('../assets/fonts/LizzyHandwriting.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------------- Design tokens ------------------------------------------------------------------------- */ :root { /* Paleta: hex estimados visualmente a partir do PDF de identidade; confirmar valores oficiais com a ASA&Co antes de produção final. */ --color-creme: #EDE4C4; --color-terracota: #B34E2E; --color-bordo: #3D0C1B; --color-oliva: #707A52; --color-dourado: #C9A876; --color-preto: #1A1A1A; --color-bg: var(--color-creme); --color-text: var(--color-preto); --color-accent: var(--color-terracota); --font-display: 'Ivy Presto Display', 'Fraunces', Georgia, serif; --font-body: 'Aeonik', 'Inter', -apple-system, sans-serif; --font-script: 'Lizzy Handwriting', 'Alex Brush', cursive; --container-width: 1120px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.75rem; --space-4: 3rem; --space-5: 5rem; --space-6: 8rem; --transition-slow: 900ms cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------------------------------------------------- Reset básico ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Foco visível: acessibilidade de teclado */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-terracota); outline-offset: 3px; } .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-3); } .section-label { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-terracota); margin-bottom: var(--space-3); } /* ------------------------------------------------------------------------- Hero ------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: var(--color-creme); text-align: center; } .hero__bg { position: absolute; inset: 0; /* Poster (frame do próprio vídeo) como fallback enquanto o vídeo carrega, e o gradiente por baixo dele como última rede de segurança. */ background-image: url('../assets/images/hero-logo-poster.jpg'), linear-gradient(135deg, var(--color-terracota) 0%, var(--color-bordo) 55%, var(--color-preto) 100%); background-size: cover; background-position: center; } .hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .hero__bg video { display: none; } } .hero__play { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--space-4); padding: 0.7rem 1.5rem; border: 1px solid rgba(237, 228, 196, 0.55); border-radius: 999px; background: rgba(26, 26, 26, 0.2); color: var(--color-creme); font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; } .hero__play-icon { display: inline-flex; color: var(--color-dourado); } .hero__play:hover, .hero__play:focus-visible { background: rgba(237, 228, 196, 0.14); border-color: var(--color-dourado); } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 26, 0.32) 0%, rgba(26, 26, 26, 0.55) 100%); } .hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: var(--space-3); animation: fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero__eyebrow { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237, 228, 196, 0.8); margin: 0; } .hero__scroll-cue { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); width: 1px; height: 48px; background: linear-gradient(180deg, rgba(237, 228, 196, 0.9), transparent); animation: scroll-cue 2.2s ease-in-out infinite; } @keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes scroll-cue { 0% { transform: translateX(-50%) scaleY(0.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(-50%) scaleY(1); opacity: 0; } } /* ------------------------------------------------------------------------- Quem somos / Por que nascemos (seções em duas colunas) ------------------------------------------------------------------------- */ .split-section { display: grid; grid-template-columns: 1fr; } .split-section__media { position: relative; min-height: 340px; overflow: hidden; } .split-section__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .split-section__media--symbol { display: flex; align-items: center; justify-content: center; background: var(--color-oliva); min-height: 280px; } .split-section__media--symbol .split-section__symbol-graphic { width: min(32%, 200px); height: auto; object-fit: contain; } .split-section__content { padding: var(--space-5) var(--space-3); background: var(--color-creme); display: flex; flex-direction: column; justify-content: center; } .split-section__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--color-bordo); margin: 0 0 var(--space-3); } .split-section__body { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.85; color: var(--color-preto); max-width: 520px; margin: 0 0 var(--space-2); } .split-section__body:last-child { margin-bottom: 0; } .split-section--dark .split-section__content { background: var(--color-bordo); } .split-section--dark .split-section__title { color: var(--color-creme); } .split-section--dark .split-section__body { color: rgba(237, 228, 196, 0.85); } @media (min-width: 768px) { .split-section { grid-template-columns: 1fr 1fr; min-height: 70vh; } .split-section__media { min-height: auto; } .split-section__content { padding: var(--space-5) var(--space-4); } .split-section--reverse .split-section__media { order: 2; } .split-section--reverse .split-section__content { order: 1; } } /* ------------------------------------------------------------------------- Localização (vídeo de fundo widescreen, texto sobreposto) ------------------------------------------------------------------------- */ .location { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--color-creme); text-align: center; } .location__bg { position: absolute; inset: 0; /* Poster como fallback enquanto o vídeo carrega (ou caso não seja suportado). */ background-image: url('../assets/images/hero-poster.jpg'); background-size: cover; background-position: center; } .location__bg video { width: 100%; height: 100%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .location__bg video { display: none; } } .location__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 26, 0.3) 0%, rgba(26, 26, 26, 0.55) 100%); } .location__content { position: relative; z-index: 1; padding: var(--space-3); max-width: 640px; } .location__text { font-family: var(--font-display); font-size: clamp(1.6rem, 4.2vw, 2.4rem); color: var(--color-creme); margin: 0 0 var(--space-2); } .location__sub { font-family: var(--font-body); font-size: 0.95rem; color: var(--color-dourado); max-width: 420px; margin-inline: auto; } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--color-bordo); color: var(--color-creme); padding: var(--space-5) var(--space-3) var(--space-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); } .footer__symbol { width: 22px; height: auto; margin-bottom: var(--space-1); } .footer__brand-logo { width: 145px; height: auto; } .footer__meta { font-size: 0.85rem; color: rgba(237, 228, 196, 0.75); } .footer__meta p { margin: 0.15rem 0; } .footer__meta a { color: inherit; text-decoration: none; transition: color 200ms ease; } .footer__meta a:hover, .footer__meta a:focus-visible { color: var(--color-dourado); text-decoration: underline; text-underline-offset: 2px; } .footer__social { margin-top: var(--space-2); } .footer__social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--color-creme); opacity: 0.85; transition: opacity 200ms ease, color 200ms ease; } .footer__social-link:hover, .footer__social-link:focus-visible { opacity: 1; color: var(--color-dourado); } .footer__credit { margin-top: var(--space-3); font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(237, 228, 196, 0.5); } .footer__credit a { color: rgba(237, 228, 196, 0.75); text-decoration: underline; text-underline-offset: 2px; transition: color 200ms ease; } .footer__credit a:hover, .footer__credit a:focus-visible { color: var(--color-dourado); } /* ------------------------------------------------------------------------- Modal do Manifesto ------------------------------------------------------------------------- */ .manifesto-modal { border: none; padding: 0; background: transparent; max-width: min(92vw, 960px); width: 100%; } .manifesto-modal::backdrop { background: rgba(26, 26, 26, 0.9); } .manifesto-modal__inner { position: relative; } .manifesto-modal__video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #000; } .manifesto-modal__close { position: absolute; top: -2.75rem; right: 0; background: transparent; border: none; color: var(--color-creme); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; transition: color 200ms ease; } .manifesto-modal__close:hover, .manifesto-modal__close:focus-visible { color: var(--color-dourado); } /* ------------------------------------------------------------------------- Reveal on scroll ------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__content, .hero__scroll-cue, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }