@charset "UTF-8"; /* ========================================================================== COMGRUPOS - sistema visual do tema -------------------------------------------------------------------------- Este arquivo cuida de: tokens, tipografia, botoes, cabecalho, rodape, formularios, blog e paginas internas. O que ele NAO faz: layout das secoes da home. Display, flex-direction, gap, padding, width, max-width, align-items e justify-content dos containers sao sempre do Elementor - e por isso que o cliente consegue mexer em tudo pelo editor sem que o tema atrapalhe. A ponte entre as classes cg-* e a marcacao do Elementor esta em assets/css/elementor.css. Cores e fontes vem das variaveis globais do Elementor, com fallback. Trocar um Global Color no painel repinta o site inteiro. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ /* `body` e obrigatorio aqui: as variaveis globais do Elementor moram em .elementor-kit-N, que fica no . Declarados so em :root (o ) os var() caem sempre no valor de reserva, e trocar uma Cor Global no painel nao repintaria o tema. */ :root, body { --cg-primary: var(--e-global-color-primary, #3e4196); --cg-secondary: var(--e-global-color-secondary, #171a45); --cg-text: var(--e-global-color-text, #1a1b33); --cg-accent: var(--e-global-color-accent, #f78634); --cg-bg: var(--e-global-color-cgbg, #ffffff); --cg-dark: var(--e-global-color-cgdark, #171a45); --cg-light: var(--e-global-color-cglight, #f1f3f9); --cg-muted: var(--e-global-color-cgmuted, #5a5e7a); --cg-line: var(--e-global-color-cgline, #dde0ec); --cg-accent-ink: var(--e-global-color-cgink, #a8490a); --cg-lime: var(--e-global-color-cglime, #acd345); /* laranja escurecido para titulo grande sobre fundo claro (contraste AA) */ --cg-accent-display: #d9600b; --cg-font: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --cg-font-head: var(--e-global-typography-primary-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --cg-font-serif: "Newsreader", Georgia, "Times New Roman", serif; --cg-wrap: 1240px; --cg-gut: clamp(22px, 4vw, 40px); --cg-radius: 3px; --cg-ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; } body.cg{ margin: 0; background: var(--cg-bg); color: var(--cg-text); font-family: var(--cg-font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* :where() zera a especificidade: estes padroes nunca vencem uma classe cg-* */ :where(.cg) :where(img){ max-width: 100%; height: auto; display: block; } :where(.cg) :where(a){ color: inherit; } .cg *:focus-visible{ outline: 3px solid var(--cg-accent); outline-offset: 3px; border-radius: 2px; } .cg .cg-skip{ position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--cg-dark); color: #fff; padding: 14px 20px; font-size: .875rem; font-weight: 600; text-decoration: none; } .cg .cg-skip:focus{ left: 12px; top: 12px; } .cg .cg-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Tipografia -------------------------------------------------------------------------- */ .cg .cg-eyebrow{ font-family: var(--cg-font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cg-accent-ink); margin: 0 0 22px; line-height: 1.4; } .cg .cg-h1, .cg .cg-h2, .cg .cg-h3, .cg .cg-h4{ font-family: var(--cg-font-head); color: var(--cg-text); margin: 0; text-wrap: balance; } .cg .cg-h1{ font-size: clamp(2.4rem, 5.2vw, 4.5rem); font-weight: 800; line-height: 1.03; letter-spacing: -.038em; } .cg .cg-h2{ font-size: clamp(1.85rem, 3.6vw, 3.05rem); font-weight: 800; line-height: 1.08; letter-spacing: -.032em; } .cg .cg-h3{ font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; } .cg .cg-h4{ font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; } .cg .cg-em{ color: var(--cg-accent-display); } .cg .cg-lead{ font-size: clamp(1rem, 1.15vw, 1.0938rem); line-height: 1.72; color: var(--cg-muted); margin: 26px 0 0; max-width: 48ch; } .cg .cg-body{ font-size: .9375rem; line-height: 1.78; color: var(--cg-muted); margin: 18px 0 0; max-width: 56ch; } .cg .cg-serif{ font-family: var(--cg-font-serif); font-style: italic; font-weight: 400; color: var(--cg-accent-ink); } .cg .cg-micro{ font-size: .75rem; line-height: 1.6; letter-spacing: .01em; color: var(--cg-muted); margin: 22px 0 0; max-width: 46ch; } /* -------------------------------------------------------------------------- 4. Cor das secoes (o espacamento e do Elementor) -------------------------------------------------------------------------- */ .cg .cg-sec--light{ background: var(--cg-light); } .cg .cg-sec--white{ background: var(--cg-bg); } .cg .cg-sec--dark{ background: var(--cg-dark); color: #fff; } .cg .cg-sec--lime{ background: var(--cg-lime); } .cg .cg-sec--accent{ background: var(--cg-accent); } .cg .cg-hero{ background: var(--cg-light); overflow: hidden; } .cg .cg-strip{ background: var(--cg-light); } .cg .cg-sec--dark .cg-h1, .cg .cg-sec--dark .cg-h2, .cg .cg-sec--dark .cg-h3, .cg .cg-sec--dark .cg-h4{ color: #fff; } .cg .cg-sec--dark .cg-lead, .cg .cg-sec--dark .cg-body{ color: rgba(255,255,255,.72); } .cg .cg-sec--dark .cg-eyebrow{ color: var(--cg-accent); } .cg .cg-sec--dark .cg-em{ color: var(--cg-accent); } .cg .cg-sec--dark .cg-micro{ color: rgba(255,255,255,.6); } .cg .cg-sec--lime .cg-h1, .cg .cg-sec--lime .cg-h2{ color: var(--cg-dark); } .cg .cg-sec--lime .cg-eyebrow{ color: #45390b; } .cg .cg-sec--lime .cg-lead, .cg .cg-sec--lime .cg-body, .cg .cg-sec--lime .cg-micro{ color: #2b3320; } /* branco sobre o verde da marca da 1,7:1 - o indigo da 5:1 e e da marca */ .cg .cg-sec--lime .cg-em{ color: var(--cg-primary); } /* paineis coloridos dentro das secoes */ /* pedido do cliente (04/09): sobre o laranja o texto vai em branco cheio; so a palavra em destaque continua a mudar de cor */ .cg .cg-slab__panel--accent .cg-h2, .cg .cg-slab__panel--accent .cg-h3{ color: #fff; } .cg .cg-slab__panel--accent .cg-eyebrow{ color: #fff; } .cg .cg-slab__panel--accent .cg-lead, .cg .cg-slab__panel--accent .cg-body{ color: #fff; } .cg .cg-slab__panel--accent .cg-micro{ color: #fff; } /* o destaque e a unica cor que sobra no painel */ .cg .cg-slab__panel--accent .cg-em{ color: var(--cg-primary); } .cg .cg-slab__panel--dark .cg-h2, .cg .cg-slab__panel--dark .cg-h3{ color: #fff; } .cg .cg-slab__panel--dark .cg-eyebrow{ color: var(--cg-accent); } .cg .cg-slab__panel--dark .cg-lead, .cg .cg-slab__panel--dark .cg-body{ color: rgba(255,255,255,.74); } .cg .cg-slab__panel--dark .cg-em{ color: var(--cg-accent); } /* -------------------------------------------------------------------------- 5. Grade usada fora do Elementor (cabecalho, rodape, blog) -------------------------------------------------------------------------- */ .cg .cg-wrap{ width: 100%; max-width: var(--cg-wrap); margin: 0 auto; padding: 0 var(--cg-gut); box-sizing: border-box; } .cg .cg-sec{ padding: clamp(72px, 8vw, 128px) 0; } .cg .cg-grid-3{ display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 26px); } .cg .cg-grid-2{ display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 30px); } @media (min-width: 900px) { .cg .cg-grid-3{ grid-template-columns: repeat(3, 1fr); } .cg .cg-grid-2{ grid-template-columns: 1fr 1fr; } } .cg .cg-rule{ height: 1px; background: var(--cg-line); border: 0; margin: 0; } /* -------------------------------------------------------------------------- 6. Botoes e links (marcacao propria do tema) -------------------------------------------------------------------------- */ .cg .cg-btn{ display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; font-family: var(--cg-font-head); font-size: .8125rem; font-weight: 600; letter-spacing: .015em; line-height: 1; text-decoration: none; border: 1px solid transparent; border-radius: var(--cg-radius); cursor: pointer; transition: background-color .25s var(--cg-ease), color .25s var(--cg-ease), border-color .25s var(--cg-ease), transform .25s var(--cg-ease); } .cg .cg-btn:hover{ transform: translateY(-2px); } .cg .cg-btn__ico{ flex: 0 0 auto; transition: transform .25s var(--cg-ease); } .cg .cg-btn:hover .cg-btn__ico{ transform: translateX(3px); } .cg .cg-btn--primary{ background: var(--cg-dark); color: #fff; } .cg .cg-btn--primary:hover{ background: var(--cg-primary); } .cg .cg-btn--accent{ background: var(--cg-accent); color: var(--cg-dark); } .cg .cg-btn--accent:hover{ background: #ffa15e; } .cg .cg-btn--ghost{ background: transparent; color: var(--cg-text); border-color: var(--cg-line); } .cg .cg-btn--ghost:hover{ border-color: var(--cg-text); background: var(--cg-bg); } .cg .cg-btn--light{ background: #fff; color: var(--cg-dark); } .cg .cg-btn--light:hover{ background: var(--cg-light); } .cg .cg-btn--sm{ padding: 13px 20px; font-size: .75rem; } .cg .cg-btns{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; } .cg .cg-link{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--cg-font-head); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; color: var(--cg-accent-ink); border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: gap .25s var(--cg-ease), color .25s var(--cg-ease); } .cg .cg-link:hover{ gap: 14px; color: var(--cg-primary); } .cg .cg-sec--dark .cg-link{ color: var(--cg-accent); } /* -------------------------------------------------------------------------- 7. Cabecalho -------------------------------------------------------------------------- */ .cg .cg-header{ position: sticky; top: 0; z-index: 120; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--cg-ease), box-shadow .3s var(--cg-ease), background-color .3s var(--cg-ease); } .cg .cg-header.is-stuck{ border-bottom-color: var(--cg-line); box-shadow: 0 10px 30px -22px rgba(23,26,69,.5); background: rgba(255,255,255,.96); } .cg .cg-header__bar{ display: flex; align-items: center; gap: 20px; min-height: 78px; transition: min-height .3s var(--cg-ease); } .cg .cg-header.is-stuck .cg-header__bar{ min-height: 66px; } .cg .cg-header__brand{ display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; } .cg .cg-header__brand img{ height: 38px; width: auto; transition: height .3s var(--cg-ease); } .cg .cg-header.is-stuck .cg-header__brand img{ height: 32px; } .cg .cg-nav{ display: none; } .cg .cg-nav ul{ display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .cg .cg-nav a{ position: relative; font-family: var(--cg-font-head); font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--cg-text); text-decoration: none; padding: 6px 0; transition: color .2s var(--cg-ease); } .cg .cg-nav a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--cg-accent); transition: right .28s var(--cg-ease); } .cg .cg-nav a:hover, .cg .cg-nav .current-menu-item > a, .cg .cg-nav .is-active > a{ color: var(--cg-primary); } .cg .cg-nav a:hover::after, .cg .cg-nav .is-active > a::after{ right: 0; } /* a pagina em visita fica marcada: negrito e filete aceso */ .cg .cg-nav .current-menu-item > a, .cg .cg-nav .current-menu-ancestor > a, .cg .cg-nav .current-page-ancestor > a, .cg .cg-nav .current-menu-parent > a{ font-weight: 700; color: var(--cg-primary); } .cg .cg-nav .current-menu-item > a::after, .cg .cg-nav .current-menu-ancestor > a::after, .cg .cg-nav .current-page-ancestor > a::after, .cg .cg-nav .current-menu-parent > a::after{ right: 0; } .cg .cg-drawer .current-menu-item > a, .cg .cg-drawer .current-menu-ancestor > a, .cg .cg-drawer .current-page-ancestor > a{ font-weight: 700; color: var(--cg-primary); } .cg .cg-header__cta{ display: none; } .cg .cg-burger{ display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box; background: none; border: 0; cursor: pointer; } .cg .cg-burger span{ display: block; height: 1.5px; background: var(--cg-text); transition: transform .3s var(--cg-ease), opacity .2s; } .cg .cg-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); } .cg .cg-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; } .cg .cg-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); } .cg .cg-drawer{ display: none; border-top: 1px solid var(--cg-line); background: #fff; max-height: calc(100dvh - 66px); overflow-y: auto; } .cg .cg-drawer.is-open{ display: block; } .cg .cg-drawer ul{ list-style: none; margin: 0; padding: 8px 0 4px; } /* limitado ao nav: solto, `.cg-drawer a` (0,1,1) derrubaria a cor do botao */ .cg .cg-drawer nav a{ display: block; padding: 15px 0; font-family: var(--cg-font-head); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: var(--cg-text); text-decoration: none; border-bottom: 1px solid var(--cg-line); } .cg .cg-drawer nav a:hover{ color: var(--cg-primary); } .cg .cg-drawer .cg-btn{ width: 100%; justify-content: center; box-sizing: border-box; margin: 22px 0 26px; } @media (min-width: 1140px) { .cg .cg-nav{ display: block; } .cg .cg-header__cta{ display: inline-flex; } .cg .cg-burger{ display: none; } .cg .cg-drawer{ display: none !important; } } /* -------------------------------------------------------------------------- 8. Formularios -------------------------------------------------------------------------- */ .cg .cg-form{ display: grid; gap: 16px; } .cg .cg-form__row{ display: grid; grid-template-columns: 1fr; gap: 16px; } .cg .cg-field{ display: block; } .cg .cg-field__label{ display: block; font-family: var(--cg-font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cg-muted); margin-bottom: 9px; } .cg .cg-field input, .cg .cg-field textarea, .cg .cg-field select{ width: 100%; box-sizing: border-box; font-family: var(--cg-font); font-size: .9375rem; color: var(--cg-text); background: #fff; border: 1px solid var(--cg-line); border-radius: var(--cg-radius); padding: 14px 16px; transition: border-color .2s var(--cg-ease), box-shadow .2s var(--cg-ease), background-color .2s var(--cg-ease); } .cg .cg-field textarea{ min-height: 132px; resize: vertical; } .cg .cg-field input:focus, .cg .cg-field textarea:focus{ border-color: var(--cg-primary); box-shadow: 0 0 0 3px rgba(62,65,150,.12); outline: none; } .cg .cg-form__foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; } .cg .cg-form__msg{ margin: 0; font-size: .875rem; font-weight: 600; } .cg .cg-form__msg--ok{ color: #1c7a3e; } .cg .cg-form__msg--err{ color: #b3261e; } .cg .cg-form .cg-micro{ margin-top: 4px; } .cg .cg-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (min-width: 620px) { .cg .cg-form__row{ grid-template-columns: 1fr 1fr; } } /* -------------------------------------------------------------------------- 9. Rodape -------------------------------------------------------------------------- */ .cg .cg-footer{ background: var(--cg-light); border-top: 1px solid var(--cg-line); padding: clamp(52px, 6vw, 84px) 0 0; } .cg .cg-footer__grid{ display: grid; grid-template-columns: 1fr; gap: clamp(34px, 4vw, 56px); } .cg .cg-footer__logo{ height: 42px; width: auto; } .cg .cg-footer__about{ margin: 22px 0 0; max-width: 34ch; } .cg .cg-footer__h{ font-family: var(--cg-font-head); font-size: .625rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cg-muted); margin: 0 0 18px; } .cg .cg-footer ul{ list-style: none; margin: 0; padding: 0; } .cg .cg-footer li + li{ margin-top: 11px; } .cg .cg-footer li a{ font-size: .875rem; color: var(--cg-text); text-decoration: none; transition: color .2s var(--cg-ease); } .cg .cg-footer li a:hover{ color: var(--cg-primary); text-decoration: underline; text-underline-offset: 3px; } .cg .cg-footer__bottom{ display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: 26px 0; border-top: 1px solid var(--cg-line); } .cg .cg-footer__bottom .cg-micro{ margin: 0; max-width: none; } @media (min-width: 780px) { .cg .cg-footer__grid{ grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 1040px) { .cg .cg-footer__grid{ grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } } /* -------------------------------------------------------------------------- 10. WhatsApp flutuante -------------------------------------------------------------------------- */ .cg .cg-wa{ position: fixed; right: 18px; bottom: 18px; z-index: 130; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #128c4a; color: #fff; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(20,60,30,.5); transform: translateY(14px); opacity: 0; pointer-events: none; transition: transform .35s var(--cg-ease), opacity .35s var(--cg-ease), background-color .2s; } .cg .cg-wa.is-on{ transform: none; opacity: 1; pointer-events: auto; } .cg .cg-wa:hover{ background: #0f7a40; } /* -------------------------------------------------------------------------- 11. Animacoes discretas -------------------------------------------------------------------------- */ .cg-js .cg-rise{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--cg-ease), transform .7s var(--cg-ease); } .cg-js .cg-rise.is-in{ opacity: 1; transform: none; } .cg-js .cg-rise--d1{ transition-delay: .08s; } .cg-js .cg-rise--d2{ transition-delay: .16s; } .cg-js .cg-rise--d3{ transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { html{ scroll-behavior: auto; } .cg *, .cg *::before, .cg *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; } .cg-js .cg-rise{ opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- 12. Conteudo editorial: paginas classicas, posts e blog -------------------------------------------------------------------------- */ .cg .cg-prose{ max-width: 72ch; } .cg .cg-prose h2{ font-family: var(--cg-font-head); font-size: 1.75rem; font-weight: 800; letter-spacing: -.028em; line-height: 1.15; margin: 46px 0 16px; } .cg .cg-prose h3{ font-family: var(--cg-font-head); font-size: 1.25rem; font-weight: 700; letter-spacing: -.018em; margin: 34px 0 12px; } .cg .cg-prose p, .cg .cg-prose li{ font-size: 1rem; line-height: 1.8; color: var(--cg-muted); } .cg .cg-prose a{ color: var(--cg-primary); text-underline-offset: 3px; } .cg .cg-prose img{ border-radius: var(--cg-radius); margin: 28px 0; } .cg .cg-prose blockquote{ margin: 30px 0; padding-left: 22px; border-left: 2px solid var(--cg-accent); font-family: var(--cg-font-serif); font-style: italic; font-size: 1.15rem; color: var(--cg-text); } .cg .cg-page-head{ padding: clamp(56px, 7vw, 104px) 0 clamp(30px, 4vw, 52px); background: var(--cg-light); } .cg .cg-page-head .cg-eyebrow{ margin-bottom: 18px; } .cg .cg-card__thumb{ display: block; margin: -1px -1px 24px; border-radius: 3px 3px 0 0; overflow: hidden; } .cg .cg-card__thumb img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .cg .cg-card__title a{ text-decoration: none; } .cg .cg-card__title a:hover{ color: var(--cg-primary); } .cg .cg-single__cover{ margin-top: -22px; } .cg .cg-single__cover img{ border-radius: var(--cg-radius); } .cg .cg-404{ min-height: 56vh; display: flex; align-items: center; } .cg .cg-comments__list{ list-style: none; padding: 0; } .cg .cg-comments .comment-body{ padding: 20px 0; border-bottom: 1px solid var(--cg-line); } .cg .cg-searchform{ max-width: 460px; } .cg .cg-pager{ margin-top: 48px; } .cg .cg-pager .nav-links{ display: flex; flex-wrap: wrap; gap: 10px; } .cg .cg-pager .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--cg-line); border-radius: var(--cg-radius); font-family: var(--cg-font-head); font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--cg-text); } .cg .cg-pager .page-numbers.current{ background: var(--cg-dark); border-color: var(--cg-dark); color: #fff; } /* -------------------------------------------------------------------------- 13. Ajustes gerais do Elementor -------------------------------------------------------------------------- */ .cg .elementor-section.elementor-section-boxed > .elementor-container{ max-width: var(--cg-wrap); } .elementor-editor-active .cg-header{ position: relative; } /* -------------------------------------------------------------------------- 14. Submenu do cabecalho (paginas internas de Soluções) -------------------------------------------------------------------------- */ .cg .cg-nav li{ position: relative; } .cg .cg-nav .sub-menu{ position: absolute; top: 100%; left: -18px; display: block; min-width: 248px; padding: 10px 0; margin: 0; background: #fff; border: 1px solid var(--cg-line); border-radius: var(--cg-radius); box-shadow: 0 26px 50px -30px rgba(23,26,69,.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--cg-ease), transform .2s var(--cg-ease), visibility .2s; z-index: 10; } .cg .cg-nav li:hover > .sub-menu, .cg .cg-nav li:focus-within > .sub-menu{ opacity: 1; visibility: visible; transform: none; } .cg .cg-nav .sub-menu li{ display: block; } .cg .cg-nav .sub-menu a{ display: block; padding: 9px 20px; font-size: .8125rem; font-weight: 500; white-space: nowrap; } .cg .cg-nav .sub-menu a::after{ display: none; } .cg .cg-nav .sub-menu a:hover{ background: var(--cg-light); color: var(--cg-primary); } /* o pai ganha um sinal de que abre */ .cg .cg-nav .menu-item-has-children > a{ padding-right: 14px; } .cg .cg-nav .menu-item-has-children > a::before{ content: ""; position: absolute; right: 2px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg); opacity: .55; } /* no menu do telemovel o submenu fica sempre aberto, recuado */ .cg .cg-drawer .sub-menu{ padding: 0 0 0 18px; } .cg .cg-drawer .sub-menu a{ font-size: .9375rem; font-weight: 500; color: var(--cg-muted); } .cg .cg-drawer nav > ul > li > a{ display: block; } /* credito discreto, sem competir com o copyright */ /* Credito do rodape: a marca entra como imagem, curta e discreta. A discricao vem do TAMANHO (rotulo de 10px, marca de 18px), nao de opacidade sobre o texto: `opacity` no bloco inteiro derrubava o rotulo para perto de 2:1 de contraste, e credito ilegivel nao e credito sutil, e credito quebrado. So a imagem fica levemente apagada, e acende no hover — imagem nao tem de passar no criterio de texto. */ .cg .cg-credito { margin: 0; } .cg .cg-credito a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; border-bottom: 0; } .cg .cg-credito span { font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cg-muted); } /* a altura manda; a largura vem do arquivo (2x) */ .cg .cg-credito img { height: 18px; width: auto; display: block; opacity: .78; transition: opacity .25s var(--cg-ease); } .cg .cg-credito a:hover img { opacity: 1; }