/* ========================================================================= * Direção visual "Estilo Roma" — sobrescritas opcionais * * Ativadas por atributos no : data-roma="footer corners divider header". * Cada bloco age só quando o respectivo valor está presente, então tudo é * 100% alternável pelo Customizer (Direção visual → Estilo Roma). * * Inspirado em robertaroma.com.br: visual institucional, cantos discretos, * seções bem divididas, rodapé com colunas + barra de copyright. * * Combina com (mas não exige) a paleta "roma". Funciona em qualquer paleta. * @package DraSilvia * @since 1.5.0 * ========================================================================= */ /* ------------------------------------------------------------------------- * 1. CANTOS / BOTÕES RETOS (institucional) * A Roma usa cantos discretos (3–10px) e botões pouco arredondados. * Sobrescreve os principais elementos arredondados do tema. * ------------------------------------------------------------------------- */ html[data-roma~="corners"] { --dsr-radius: 6px; --dsr-radius-sm: 4px; } html[data-roma~="corners"] .btn, html[data-roma~="corners"] .btn-primary, html[data-roma~="corners"] .nav-cta, html[data-roma~="corners"] .dsf-submit, html[data-roma~="corners"] .dsn-form-wrap .dsf-submit { border-radius: var(--dsr-radius) !important; } html[data-roma~="corners"] .dsf-row input, html[data-roma~="corners"] .dsf-row select, html[data-roma~="corners"] .dsf-row textarea { border-radius: var(--dsr-radius-sm) !important; } html[data-roma~="corners"] .card, html[data-roma~="corners"] .news-form-wrap .dsf, html[data-roma~="corners"] .dsf-success, html[data-roma~="corners"] .dsn-modal { border-radius: 10px !important; } /* Pills viram retângulos discretos (badges/eyebrows com radius alto). */ html[data-roma~="corners"] .tag, html[data-roma~="corners"] [style*="border-radius: 999px"], html[data-roma~="corners"] .pill { border-radius: var(--dsr-radius-sm) !important; } /* ------------------------------------------------------------------------- * 2. DIVISOR DE SEÇÕES * Linha fina entre blocos + alternância sutil de fundo, como sites * institucionais. Aplica a
de topo do conteúdo. * ------------------------------------------------------------------------- */ html[data-roma~="divider"] main > section + section, html[data-roma~="divider"] .site-main > section + section { border-top: 1px solid var(--rule); } /* Faixa alternada: seções pares ganham fundo levemente diferente. */ html[data-roma~="divider"] main > section:nth-of-type(even) { background: var(--cream); } /* ------------------------------------------------------------------------- * 3. CABEÇALHO ESTILO ROMA * Header mais institucional: fundo sólido na cor principal, navegação * em maiúsculas discretas, CTA em verde de acento. Sem mexer no markup * nem na lógica do menu mobile — apenas estilo. * ------------------------------------------------------------------------- */ html[data-roma~="header"] .site-header { background: var(--paper); border-bottom: 2px solid var(--ink); box-shadow: 0 2px 12px -6px color-mix(in srgb, var(--ink) 40%, transparent); } html[data-roma~="header"] .site-header .nav a { font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em; color: var(--ink); } html[data-roma~="header"] .site-header .nav a:hover { color: var(--clay); } /* CTA do topo no verde de acento, retângulo discreto. */ html[data-roma~="header"] .site-header .nav-cta { background: var(--clay); color: var(--paper); border-radius: 6px; padding: 10px 20px; font-weight: 600; } html[data-roma~="header"] .site-header .nav-cta:hover { background: var(--clay-deep); } /* Marca: nome na cor institucional. */ html[data-roma~="header"] .site-header .brand .name { color: var(--ink); } /* ------------------------------------------------------------------------- * 4. RODAPÉ ESTILO ROMA * Topo com slogan, colunas de links/contato/redes, barra de copyright. * Reforça a hierarquia e o fundo institucional escuro. * ------------------------------------------------------------------------- */ html[data-roma~="footer"] .site-footer { background: var(--ink); color: color-mix(in srgb, var(--cream) 88%, transparent); } /* Slogan/lema em destaque no topo do rodapé. */ html[data-roma~="footer"] .site-footer .footer-motto { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; color: var(--paper); } /* Títulos de coluna no acento (verde na paleta roma). */ html[data-roma~="footer"] .site-footer .footer-col h5 { color: var(--clay); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } /* Links do rodapé em tom claro, hover no acento. */ html[data-roma~="footer"] .site-footer .footer-col a { color: color-mix(in srgb, var(--cream) 78%, transparent); } html[data-roma~="footer"] .site-footer .footer-col a:hover { color: var(--clay); } /* Barra inferior com separador claro. */ html[data-roma~="footer"] .site-footer .footer-base { border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); padding-top: 18px; } /* Marca do rodapé na cor clara. */ html[data-roma~="footer"] .site-footer .footer-brand .name { color: var(--paper); } html[data-roma~="footer"] .site-footer .footer-contact-direct a { color: color-mix(in srgb, var(--cream) 80%, transparent); } html[data-roma~="footer"] .site-footer .footer-contact-direct a .lab { color: var(--clay); } /* Acessibilidade: respeita preferência de menos movimento (sem efeitos extras). */ @media (prefers-reduced-motion: reduce) { html[data-roma~="header"] .site-header { transition: none; } } /* ------------------------------------------------------------------------- * 5. IMAGENS — modos: rounded | circle-sec | circle-all * Controlado por data-roma-img no . * * Importante: os heros principais (.hero-photo da home, .sobre-hero-img) * têm textos/badges sobrepostos. Forçar círculo neles corta a imagem e o * conteúdo — por isso "circle-sec" (padrão seguro) NÃO os toca; só o modo * "circle-all", escolhido explicitamente, os arredonda. * ------------------------------------------------------------------------- */ /* -- Modo "rounded": cantos arredondados, nunca corta -- */ html[data-roma-img="rounded"] .hero-photo, html[data-roma-img="rounded"] .sobre-hero-img, html[data-roma-img="rounded"] .amigos-hero-photo, html[data-roma-img="rounded"] .muni-photo, html[data-roma-img="rounded"] .traj-photo, html[data-roma-img="rounded"] .hero-photo img, html[data-roma-img="rounded"] .sobre-hero-img img, html[data-roma-img="rounded"] .amigos-hero-photo img, html[data-roma-img="rounded"] .muni-photo img, html[data-roma-img="rounded"] .traj-photo img { border-radius: 18px !important; } /* -- Fotos SECUNDÁRIAS viram círculo (modos circle-sec e circle-all) -- */ html[data-roma-img="circle-sec"] .muni-photo, html[data-roma-img="circle-sec"] .traj-photo, html[data-roma-img="circle-all"] .muni-photo, html[data-roma-img="circle-all"] .traj-photo { border-radius: 50% !important; aspect-ratio: 1 / 1; overflow: hidden; width: 100%; max-width: min(360px, 100%); height: auto !important; min-height: 0 !important; margin-inline: auto; } html[data-roma-img="circle-sec"] .muni-photo img, html[data-roma-img="circle-sec"] .traj-photo img, html[data-roma-img="circle-all"] .muni-photo img, html[data-roma-img="circle-all"] .traj-photo img { border-radius: 50% !important; width: 100%; height: 100%; object-fit: cover; } /* -- Fotos de HERO PRINCIPAL só viram círculo no modo "circle-all" -- * Na home, o círculo é aplicado ao .frame (que contém só a imagem), NÃO ao * .hero-photo inteiro — assim a tag "Itabuna · BA · PL" e a citação, que ficam * fora do frame, permanecem totalmente visíveis (não são cortadas pela borda). */ html[data-roma-img="circle-all"] .hero-photo .frame { border-radius: 50% !important; aspect-ratio: 1 / 1; overflow: hidden; width: 100%; max-width: min(440px, 100%); height: auto !important; min-height: 0 !important; margin-inline: auto; } html[data-roma-img="circle-all"] .hero-photo .frame img { border-radius: 50% !important; width: 100%; height: 100%; object-fit: cover; } /* A tag e a citação da home ficam acima/abaixo do círculo, centralizadas. */ html[data-roma-img="circle-all"] .hero-photo { display: flex; flex-direction: column; align-items: center; } html[data-roma-img="circle-all"] .hero-photo .hero-tag { position: static !important; margin-bottom: 14px; align-self: center; } html[data-roma-img="circle-all"] .hero-photo .hero-quote { position: static !important; margin-top: 18px; text-align: center; max-width: 90%; } /* Sobre: NÃO tem .frame. O container vira flex-column (foto + legenda * empilhadas), o círculo é aplicado direto na , e a .meta cai abaixo, * totalmente visível (em vez de sobreposta e cortada pela borda curva). */ html[data-roma-img="circle-all"] .sobre-hero-img { display: flex; flex-direction: column; align-items: center; background: transparent !important; min-height: 0 !important; overflow: visible !important; } html[data-roma-img="circle-all"] .sobre-hero-img img { border-radius: 50% !important; aspect-ratio: 1 / 1; width: 100%; max-width: min(440px, 100%); height: auto !important; object-fit: cover; margin-inline: auto; } html[data-roma-img="circle-all"] .sobre-hero-img::after { display: none; } html[data-roma-img="circle-all"] .sobre-hero-img .meta { position: static !important; margin-top: 14px; align-self: center; text-align: center; } /* Projeto Amigos da Saúde: mesma lógica — container flex, círculo na img, * legenda (.photo-caption) abaixo do círculo e totalmente visível. */ html[data-roma-img="circle-all"] .amigos-hero-photo { display: flex; flex-direction: column; align-items: center; overflow: visible !important; min-height: 0 !important; background: transparent !important; } html[data-roma-img="circle-all"] .amigos-hero-photo img { border-radius: 50% !important; aspect-ratio: 1 / 1; width: 100%; max-width: min(460px, 100%); height: auto !important; object-fit: cover; margin-inline: auto; } html[data-roma-img="circle-all"] .amigos-hero-photo .photo-caption { position: static !important; background: var(--ink) !important; color: var(--cream) !important; margin-top: 14px; border-radius: 6px; text-align: center; } /* Reduz a desproporção: centraliza verticalmente e dá um pouco mais de * espaço à coluna da foto para o círculo respirar ao lado do texto longo. */ html[data-roma-img="circle-all"] .amigos-hero-grid, html[data-roma-img="circle-sec"] .amigos-hero-grid { align-items: center; grid-template-columns: 1.05fr 0.95fr; } /* ------------------------------------------------------------------------- * 6. BOTÕES SÓLIDOS (SEM SETA) * Remove a seta "→" e deixa botões cheios e retos (institucional). * O botão "ghost" (vazado) vira sólido para uniformizar. * ------------------------------------------------------------------------- */ html[data-roma~="buttons"] .btn .arrow, html[data-roma~="buttons"] .nav-cta .arrow, html[data-roma~="buttons"] .dsf-submit-arrow { display: none !important; } html[data-roma~="buttons"] .btn, html[data-roma~="buttons"] .btn-primary, html[data-roma~="buttons"] .btn-ghost { background: var(--clay); color: var(--paper); border: 1px solid var(--clay); font-weight: 600; padding: 14px 28px; } html[data-roma~="buttons"] .btn:hover, html[data-roma~="buttons"] .btn-primary:hover, html[data-roma~="buttons"] .btn-ghost:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--paper); } /* Botão secundário (ghost) ganha variante institucional azul. */ html[data-roma~="buttons"] .btn-ghost { background: var(--ink); border-color: var(--ink); } html[data-roma~="buttons"] .btn-ghost:hover { background: var(--ink-2); border-color: var(--ink-2); } /* ------------------------------------------------------------------------- * 7. SEÇÕES DE FUNDO ESCURO * Faixas de destaque (CTA final, blog-cta, apoie) ganham fundo escuro * institucional com texto claro — cria o ritmo visual da Roma. * ------------------------------------------------------------------------- */ html[data-roma~="darksec"] .blog-cta, html[data-roma~="darksec"] .cta-bottom, html[data-roma~="darksec"] .apoie-vias { background: var(--ink) !important; color: color-mix(in srgb, var(--cream) 90%, transparent); } /* Os cards .apoie-via têm fundo CLARO próprio (paper/cream). Na seção escura * isso deixava texto claro sobre card claro = ilegível. Aqui escurecemos os * cards também, com uma borda sutil para destacá-los do fundo da seção. */ html[data-roma~="darksec"] .apoie-vias .apoie-via { background: var(--ink) !important; border-color: color-mix(in srgb, var(--cream) 16%, transparent) !important; } html[data-roma~="darksec"] .apoie-vias .apoie-via-featured { background: color-mix(in srgb, var(--cream) 8%, var(--ink)) !important; border-color: var(--clay) !important; } html[data-roma~="darksec"] .apoie-vias .apoie-via:hover { border-color: var(--clay) !important; } html[data-roma~="darksec"] .blog-cta h2, html[data-roma~="darksec"] .blog-cta h3, html[data-roma~="darksec"] .cta-bottom h2, html[data-roma~="darksec"] .cta-bottom h3, html[data-roma~="darksec"] .apoie-vias h2, html[data-roma~="darksec"] .apoie-vias-head h2 { color: var(--paper) !important; } html[data-roma~="darksec"] .blog-cta p, html[data-roma~="darksec"] .cta-bottom p, html[data-roma~="darksec"] .apoie-vias p, html[data-roma~="darksec"] .apoie-vias .apoie-via p, html[data-roma~="darksec"] .apoie-vias .via-list li { color: color-mix(in srgb, var(--cream) 82%, transparent) !important; } /* Títulos dos cards: claros, com o "em" no acento. */ html[data-roma~="darksec"] .apoie-vias .apoie-via h3 { color: var(--paper) !important; } html[data-roma~="darksec"] .apoie-vias .apoie-via h3 em { color: var(--clay) !important; } /* Número grande do card (03, 04) no acento. */ html[data-roma~="darksec"] .apoie-vias .via-num { color: var(--clay) !important; } /* eyebrow/label de destaque no acento (verde). */ html[data-roma~="darksec"] .blog-cta .eyebrow, html[data-roma~="darksec"] .cta-bottom .eyebrow, html[data-roma~="darksec"] .apoie-vias .eyebrow { color: var(--clay) !important; } /* Dentro de seção escura, botão sólido claro para contraste. */ html[data-roma~="darksec"] .cta-bottom .btn-primary, html[data-roma~="darksec"] .blog-cta .btn-primary { background: var(--clay); border-color: var(--clay); color: var(--paper); } /* Botões dentro dos cards escuros da Apoie: precisam de fundo sólido para * não sumirem. O primário (.btn-primary) vai no verde de acento; o vazado * (.btn-ghost) ganha contorno claro visível sobre o card escuro. */ html[data-roma~="darksec"] .apoie-vias .btn-primary { background: var(--clay) !important; border-color: var(--clay) !important; color: var(--paper) !important; } html[data-roma~="darksec"] .apoie-vias .btn-primary:hover { background: var(--clay-deep) !important; border-color: var(--clay-deep) !important; } html[data-roma~="darksec"] .apoie-vias .btn-ghost { background: transparent !important; border: 1.5px solid color-mix(in srgb, var(--cream) 55%, transparent) !important; color: var(--paper) !important; } html[data-roma~="darksec"] .apoie-vias .btn-ghost:hover { background: var(--clay) !important; border-color: var(--clay) !important; color: var(--paper) !important; } /* ------------------------------------------------------------------------- * 8. ÍCONES NAS LISTAS * Marcadores de lista em estilo "check" institucional, como nas páginas * de propostas/benefícios da Roma. Usa pseudo-elemento (sem dependência * de biblioteca de ícones, para não pesar o carregamento). * ------------------------------------------------------------------------- */ html[data-roma~="icons"] .howto-list, html[data-roma~="icons"] .apoie-via ul, html[data-roma~="icons"] .content-prose ul, html[data-roma~="icons"] .prop-list { list-style: none; padding-left: 0; } html[data-roma~="icons"] .howto-list li, html[data-roma~="icons"] .apoie-via ul li, html[data-roma~="icons"] .content-prose ul li, html[data-roma~="icons"] .prop-list li { position: relative; padding-left: 30px; margin-bottom: 10px; } /* Check verde desenhado em CSS (SVG inline via mask-free background). */ html[data-roma~="icons"] .howto-list li::before, html[data-roma~="icons"] .apoie-via ul li::before, html[data-roma~="icons"] .content-prose ul li::before, html[data-roma~="icons"] .prop-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--clay); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* ------------------------------------------------------------------------- * EQUILÍBRIO DO HERO no modo "circle-all" * * Os títulos do hero foram desenhados gigantes (até 116px) para acompanhar * uma foto retangular ALTA. Com a foto em círculo, esse tamanho desequilibra * e a foto "flutua" no topo. Aqui, SOMENTE quando o hero vira círculo * (circle-all), reduzimos o título a uma escala profissional e centramos a * coluna da foto verticalmente. No modo circle-sec o hero permanece * retangular e mantém o design original — por isso não é tocado. * ------------------------------------------------------------------------- */ /* HOME */ html[data-roma-img="circle-all"] .hero h1 { font-size: clamp(40px, 5vw, 72px) !important; line-height: 1.04 !important; } html[data-roma-img="circle-all"] .hero-grid { align-items: center !important; } /* SOBRE */ html[data-roma-img="circle-all"] .sobre-hero h1 { font-size: clamp(38px, 4.6vw, 64px) !important; line-height: 1.05 !important; } html[data-roma-img="circle-all"] .sobre-hero-grid { align-items: center !important; } /* AMIGOS */ html[data-roma-img="circle-all"] .amigos-hero-text h1 { font-size: clamp(38px, 4.6vw, 64px) !important; line-height: 1.05 !important; }