@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300..900;1,9..40,300..900&family=Mulish:wght@700;800;900&display=swap"); /* VSG 2026 — Sunset Blaze tokens (porta de VSGTemplate/src/styles.css) */ :root { --radius: 1rem; --vsg-orange: #ff6b35; --vsg-amber: #ff6b35; --vsg-magenta: #0a0a0a; --vsg-violet: #525252; --vsg-cream: #fdfcf5; --vsg-ink: #0a0a0a; --background: var(--vsg-ink); --foreground: var(--vsg-cream); --card: #141414; --card-foreground: var(--vsg-cream); --primary: var(--vsg-orange); --primary-foreground: var(--vsg-ink); --secondary: #1c1c1c; --muted: #1c1c1c; --muted-foreground: #a3a3a3; --accent: var(--vsg-orange); --border: rgba(255, 255, 255, 0.08); --ring: var(--vsg-orange); --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; } /* Famílias utilitárias usadas pelos elementos (Plano 2) */ .vsg-font-display { font-family: var(--font-display); } .vsg-font-body { font-family: var(--font-body); } /* === Animações (porta de styles.css) === */ @keyframes vsg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .vsg-marquee { animation: vsg-marquee 30s linear infinite; } @keyframes vsg-scroll-cue { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } } .vsg-animate-scroll-cue { animation: vsg-scroll-cue 2s cubic-bezier(0.6, 0, 0.4, 1) infinite; } /* === Scroll reveal (porta de styles.css [data-reveal]) === */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-40px); } [data-reveal="right"] { transform: translateX(40px); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* No editor visual do Breakdance, o reveal por scroll não corre sobre elementos * injetados via AJAX (cards SSR, mapas, carrossel) → ficariam invisíveis (opacity:0). * O vsg-global.js marca no canvas; aqui mostramos tudo. */ .vsg-builder [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* === ZERO links azuis (garantia global) === * O Breakdance usa `.breakdance a { color: var(--bde-links-color) }` e `--bde-links-color` * = `--bde-brand-primary-color` (azul por defeito). Re-apontamos a var (e a de hover) dentro * de QUALQUER elemento VSG — apanha também links escritos no editor rich text. Os overrides * específicos abaixo definem `color` diretamente e continuam a vencer. */ .breakdance [class*="vsg-"] { --bde-links-color: #ff6b35; --bde-links-color-hover: #e8230f; } /* === Cores de link dos elementos VSG === * O Breakdance aplica `.breakdance a { color: var(--bde-links-color) }` (azul, especificidade 0,1,1), * que supera as regras de link dos elementos (0,1,0). Estas regras prefixadas com `.breakdance` * (0,2,x) reasseguram as cores corretas dentro dos elementos VSG. */ .breakdance .vsg-footer__link { color: #fff; } .breakdance .vsg-footer__link:hover { color: #ff6b35; } .breakdance .vsg-footer__bottom a { color: #a3a3a3; } .breakdance .vsg-footer__bottom a:hover { color: #ff6b35; } .breakdance .vsg-footer__legal a { color: #737373; } .breakdance .vsg-footer__legal a:hover { color: #ff6b35; } .breakdance .vsg-footer__logo-img { max-height: 3rem; width: auto; height: auto; } .breakdance .vsg-nav__link { color: #0a0a0a; } .breakdance .vsg-nav.is-scrolled .vsg-nav__link { color: #fff; } .breakdance .vsg-nav__link:hover { color: #e8230f; } .breakdance .vsg-nav__panel-link { color: #fff; } .breakdance .vsg-nav__panel-link:hover { color: #ff6b35; } .breakdance .vsg-nav__brand { color: inherit; } .breakdance .vsg-hero__cta { color: #0a0a0a; } .breakdance .vsg-hero__cta:hover { color: #e8230f; } .breakdance .vsg-hero__cta-m { color: #0a0a0a; } .breakdance .vsg-hero__cta-m--primary { color: #fff; } .breakdance .vsg-hero__scroll { color: #0a0a0a; } .breakdance .vsg-hero__scroll:hover { color: #e8230f; } .breakdance .vsg-id__card { color: inherit; } .breakdance .vsg-parceiros__item { color: inherit; } .breakdance .vsg-programa__card { color: inherit; text-decoration: none; } .breakdance .vsg-programa__card--featured { color: #0a0a0a; } /* Páginas internas — links */ .breakdance .vsg-pf__index-link { color: #0a0a0a; } .breakdance .vsg-pf__index-link:hover { color: #ff6b35; } .breakdance .vsg-pf__cell a { color: inherit; } .breakdance .vsg-pf__cta-btn { color: #0a0a0a; } .breakdance .vsg-pg__jump-link { color: #404040; } .breakdance .vsg-pg__jump-link:hover { color: #fdfcf5; } .breakdance .vsg-pg__cta-btn { color: #fdfcf5; } .breakdance .vsg-cc__cta { color: #fdfcf5; } .breakdance .vsg-cc__cta:hover { color: #0a0a0a; } .breakdance .vsg-local__btn { color: #fdfcf5; } .breakdance .vsg-local__btn:hover { color: #0a0a0a; } /* Páginas internas — barras sticky abaixo do Nav fixo (altura ~scrolled do header) */ .breakdance .vsg-cf__search, .breakdance .vsg-pf__index, .breakdance .vsg-pg__filters { top: 3.25rem; } /* === Headings dos elementos VSG === * O Breakdance força `.breakdance h1-h6 { color/font-family/font-size }` (0,1,1), vencendo * os elementos (0,1,0) → títulos com cor, fonte e tamanho errados (sobretudo visível nas * secções escuras). Corrige-se: (a) re-apontar a var da fonte para a Space Grotesk nos * elementos VSG; (b) reasseverar cor+tamanho por heading com especificidade `.breakdance .vsg-…`. * line-height/letter-spacing dos elementos sobrevivem (o Breakdance não os força). */ .vsg-hero, .vsg-manifesto, .vsg-local, .vsg-programa, .vsg-identidade, .vsg-chefs, .vsg-footer, .vsg-nav, .vsg-parceiros, .vsg-parceiros-full, .vsg-chefs-full, .vsg-programa-full, .vsg-comochegar, .vsg-evento { --bde-heading-font-family: var(--font-display); } .breakdance .vsg-manifesto__heading { color: #0a0a0a; font-size: clamp(2.75rem, 7vw, 6rem); } .breakdance .vsg-manifesto__principle-title { color: #0a0a0a; font-size: 1.875rem; } .breakdance .vsg-manifesto__principle:hover .vsg-manifesto__principle-title { color: var(--c, #ff6b35); } .breakdance .vsg-local__heading { color: #0a0a0a; font-size: clamp(2.5rem, 6vw, 5.5rem); } .breakdance .vsg-local__heading .vsg-local__heading-dim { color: #525252; } .breakdance .vsg-programa__heading { color: #fdfcf5; font-size: clamp(2.75rem, 7vw, 6rem); } .breakdance .vsg-programa__title { font-size: 1.875rem; } .breakdance .vsg-programa__title--dark { color: #fdfcf5; } .breakdance .vsg-programa__card--featured .vsg-programa__title { color: #0a0a0a; } .breakdance .vsg-id__heading { color: #fdfcf5; font-size: clamp(2.5rem, 6vw, 5.5rem); } .breakdance .vsg-id__heading .vsg-id__heading-accent { color: #ff6b35; } .breakdance .vsg-id__title { color: #fff; font-size: 1.875rem; } .breakdance .vsg-chefs__heading { color: #0a0a0a; font-size: clamp(2.5rem, 6vw, 5.5rem); } .breakdance .vsg-chefs__heading .vsg-chefs__hl { color: #ff6b35; } .breakdance .vsg-chefs__card-name h3 { color: #fff; font-size: 2.5rem; } .breakdance .vsg-chefs__modal-name { color: #0a0a0a; font-size: 2.25rem; } /* Páginas internas */ .breakdance .vsg-pf__title { color: #0a0a0a; font-size: clamp(2.25rem, 8vw, 7rem); } .breakdance .vsg-pf__group-title { color: #0a0a0a; font-size: 1.5rem; } @media (min-width: 640px) { .breakdance .vsg-pf__group-title { font-size: 2.25rem; } } .breakdance .vsg-pf__cta-title { color: #0a0a0a; font-size: 1.5rem; } .breakdance .vsg-cf__title { color: #0a0a0a; font-size: clamp(2.75rem, 8vw, 7rem); } .breakdance .vsg-pg__title { color: #0a0a0a; font-size: clamp(2.75rem, 8vw, 7rem); } .breakdance .vsg-pg__day-title { color: #0a0a0a; font-size: 1.25rem; } @media (min-width: 640px) { .breakdance .vsg-pg__day-title { font-size: 1.5rem; } } .breakdance .vsg-pg__s-title { color: #0a0a0a; font-size: 1.125rem; } @media (min-width: 640px) { .breakdance .vsg-pg__s-title { font-size: 1.25rem; } } .breakdance .vsg-pg__session:hover .vsg-pg__s-title { color: #ff6b35; } .breakdance .vsg-pg__cta-title { color: #0a0a0a; font-size: 1.5rem; } .breakdance .vsg-cc__title { color: #0a0a0a; font-size: clamp(2.75rem, 8vw, 7rem); } .breakdance .vsg-cc__arrival-title { color: #0a0a0a; font-size: clamp(2rem, 5vw, 3.5rem); } /* === Imagens dos elementos VSG === * O Breakdance força `.breakdance img { max-width:100%; height:auto }` (0,1,1), que vence as * dimensões/cover dos elementos (0,1,0): thumbs deixam de ser quadrados (logo o radius não dá * círculo) e os cards perdem o `object-fit: cover`. Reasseguro com `.breakdance .vsg-…` (0,2,1). */ .breakdance .vsg-chefs__item-img { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; object-position: center; } .breakdance .vsg-chefs__card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .breakdance .vsg-chefs__modal-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .breakdance .vsg-id__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .breakdance .vsg-nav__logo { height: 2.25rem; width: auto; } .breakdance .vsg-nav__panel-logo { height: 1.75rem; width: auto; } .breakdance .vsg-nav.is-scrolled .vsg-nav__logo { height: 1.75rem; width: auto; } .breakdance .vsg-parceiros__logo img { max-height: 100%; max-width: 100%; height: auto; width: auto; object-fit: contain; } /* Páginas internas — imagens */ .breakdance .vsg-cf__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .breakdance .vsg-pf__cell img { max-height: 4rem; max-width: 100%; width: auto; height: auto; object-fit: contain; } @media (min-width: 640px) { .breakdance .vsg-pf__cell img { max-height: 6rem; } } /* === Página Evento (VSG_Evento) — overrides Breakdance === */ .breakdance .vsg-ev__title { color: #0a0a0a; font-size: clamp(2.75rem, 8vw, 7rem); } .breakdance .vsg-ev__story-title { color: #fdfcf5; font-size: clamp(2rem, 5vw, 3.5rem); } .breakdance .vsg-ev__edition-year { color: #ff6b35; font-size: 1.75rem; } .breakdance .vsg-ev__edition-title { color: #fdfcf5; font-size: 1.25rem; } .breakdance .vsg-ev__about-title { color: #0a0a0a; font-size: clamp(2rem, 5vw, 3.5rem); } .breakdance .vsg-ev__cmv-title { color: #fdfcf5; font-size: clamp(1.75rem, 4vw, 2.75rem); } .breakdance .vsg-ev__cmv-link { color: #0a0a0a; } .breakdance .vsg-ev__cmv-link:hover { color: #0a0a0a; } .breakdance .vsg-ev__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .breakdance .vsg-ev__cmv-logo img { max-width: 220px; max-height: 140px; width: auto; height: auto; object-fit: contain; }