/* Guia Rio Open (responsivo) - tipografia e escala */ /* Corpo: Averta (arquivos em conteudo-guia/font) */ @font-face { font-family: "Averta"; font-style: normal; font-weight: 400; font-display: swap; src: url("../conteudo-guia/font/Averta-Regular.woff2") format("woff2"), url("../conteudo-guia/font/Averta-Regular.woff") format("woff"); } @font-face { font-family: "Averta"; font-style: normal; font-weight: 600; font-display: swap; src: url("../conteudo-guia/font/Averta-Semibold.woff2") format("woff2"), url("../conteudo-guia/font/Averta-Semibold.woff") format("woff"); } @font-face { font-family: "Averta"; font-style: normal; font-weight: 900; font-display: swap; src: url("../conteudo-guia/font/Averta-Black.woff2") format("woff2"), url("../conteudo-guia/font/Averta-Black.woff") format("woff"); } /* Títulos: Roc Grotesk (Typekit já carregado no ) */ .rioopen-guia { font-family: "Averta", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 18px; /* aumenta escala geral */ } @media (min-width: 768px) { .rioopen-guia { font-size: 20px; } } .rioopen-guia h1, .rioopen-guia h2, .rioopen-guia h3, .rioopen-guia h4, .rioopen-guia .guia-title { font-family: "roc-grotesk-wide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* -------------------------------------------------------------------------- */ /* Botões (padrões globais do guia) */ /* -------------------------------------------------------------------------- */ /* Base: formato pill (totalmente arredondado), padding e tipografia. */ .rioopen-guia .rioopen-btn, .rioopen-guia .rioopen-btn:link, .rioopen-guia .rioopen-btn:visited { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } .rioopen-guia .rioopen-btn:hover, .rioopen-guia .rioopen-btn:active { text-decoration: none; } @media (min-width: 768px) { .rioopen-guia .rioopen-btn, .rioopen-guia .rioopen-btn:link, .rioopen-guia .rioopen-btn:visited { padding: 0.625rem 1.5rem; font-size: 1rem; } } /* Botão primário: fundo vermelho + texto branco (mesmo hover da home). */ .rioopen-guia .rioopen-btn-primary, .rioopen-guia .rioopen-btn-primary:link, .rioopen-guia .rioopen-btn-primary:visited { background-color: #e10600; color: #ffffff; } .rioopen-guia .rioopen-btn-primary:hover, .rioopen-guia .rioopen-btn-primary:active { color: #e5e7eb; /* gray-200 */ filter: brightness(0.95); } /* Botão secundário: fundo branco + texto vermelho (mesmo hover do header interno). */ .rioopen-guia .rioopen-btn-secondary, .rioopen-guia .rioopen-btn-secondary:link, .rioopen-guia .rioopen-btn-secondary:visited { background-color: #ffffff; color: #e10600; } .rioopen-guia .rioopen-btn-secondary:hover, .rioopen-guia .rioopen-btn-secondary:active { background-color: #f4f4f4; color: #b00500; } /* Link interno do bloco Gutenberg: forçar cor e hover (evitar override do padrão global de links). */ .rioopen-guia .rioopen-btn-primary a, .rioopen-guia .rioopen-btn-primary .wp-block-button__link { color: #ffffff !important; text-decoration: none; } .rioopen-guia .rioopen-btn-primary:hover a, .rioopen-guia .rioopen-btn-primary:active a, .rioopen-guia .rioopen-btn-primary:hover .wp-block-button__link, .rioopen-guia .rioopen-btn-primary:active .wp-block-button__link { color: #e5e7eb !important; text-decoration: none; } .rioopen-guia .rioopen-btn-secondary a, .rioopen-guia .rioopen-btn-secondary .wp-block-button__link { color: #e10600 !important; text-decoration: none; } .rioopen-guia .rioopen-btn-secondary:hover a, .rioopen-guia .rioopen-btn-secondary:active a, .rioopen-guia .rioopen-btn-secondary:hover .wp-block-button__link, .rioopen-guia .rioopen-btn-secondary:active .wp-block-button__link { color: #b00500 !important; text-decoration: none; } /* Botão CTA na revista: espaçamento acima (usar no bloco junto com rioopen-btn rioopen-btn-primary). */ .rioopen-guia .rioopen-btn-revista-cta { margin-top: 16px; } /* -------------------------------------------------------------------------- */ /* Revista – conteúdo das matérias (single): fontes do guia + espaçamento */ /* -------------------------------------------------------------------------- */ .rioopen-guia .revista-single-content, .rioopen-guia .revista-single-content li { font-family: "Averta", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111827; /* gray-900 */ line-height: 1.6; } .rioopen-guia .revista-single-content p { font-family: "Averta", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 14px; color: #111827; line-height: 1.6; } @media (min-width: 768px) { .rioopen-guia .revista-single-content p { font-size: 16px; } } .rioopen-guia .revista-single-content h1, .rioopen-guia .revista-single-content h2, .rioopen-guia .revista-single-content h3, .rioopen-guia .revista-single-content h4 { font-family: "roc-grotesk-wide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; color: #111827; } .rioopen-guia .revista-single-content h2 { color: #e10600; /* rioopen-red */ line-height: 1.25; } .rioopen-guia .revista-single-content h4 { font-size: 16px; } @media (min-width: 768px) { .rioopen-guia .revista-single-content h4 { font-size: 18px; } } .rioopen-guia .revista-single-content p + p { margin-top: 1.25em; } .rioopen-guia .revista-single-content p:first-child { margin-top: 0; } .rioopen-guia .revista-single-content img { margin-top: 1.25em; margin-bottom: 1.25em; display: block; } .rioopen-guia .revista-single-content h1, .rioopen-guia .revista-single-content h2, .rioopen-guia .revista-single-content h3, .rioopen-guia .revista-single-content h4 { margin-top: 1.5em; margin-bottom: 0.5em; } .rioopen-guia .revista-single-content h1:first-child, .rioopen-guia .revista-single-content h2:first-child, .rioopen-guia .revista-single-content h3:first-child, .rioopen-guia .revista-single-content h4:first-child { margin-top: 0; }