/* SH Vendas — estilos globais, cabeçalho e rodapé. Tokens vêm do theme.json (--wp--preset--*, --wp--custom--*). Valores literais = protótipo (design/website/Shell.jsx). */ /* ---------- Base ---------- */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: none; box-shadow: var(--wp--custom--focus-ring); } .wp-site-blocks > * + * { margin-block-start: 0; } .sh-main { padding-top: 140px; } .sh-main--landing { padding-top: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- Texto corrido (posts, soluções, páginas simples) ---------- */ .sh-prose { padding: 64px 24px 0; font-size: 17px; line-height: 1.7; } .sh-prose > * { max-width: 820px; } .sh-prose h2 { margin-top: 56px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; scroll-margin-top: 120px; } .sh-prose h3 { margin-top: 40px; font-size: clamp(21px, 2vw, 24px); line-height: 1.3; scroll-margin-top: 120px; } .sh-prose a { text-decoration: underline; text-underline-offset: 3px; } .sh-prose li + li { margin-top: 6px; } .sh-prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--wp--preset--color--blue); font-size: 19px; color: var(--wp--preset--color--navy); } .sh-prose img { border-radius: 16px; } .sh-stack > * + * { margin-block-start: 48px; } .sh-featured-image { margin: 48px auto 0; padding: 0 24px; max-width: 1040px; box-sizing: content-box; } .sh-featured-image img { border-radius: 26px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; } @media (max-width: 640px) { .sh-prose { padding: 48px 20px 0; font-size: 16px; } .sh-featured-image { padding: 0 20px; } } /* ---------- Busca e 404 ---------- */ .sh-search { padding: 56px 24px 0; } .sh-search > * + * { margin-block-start: 32px; } .sh-search__form .wp-block-search__inside-wrapper { gap: 8px; padding: 0; border: 0; } .sh-search__form .wp-block-search__input { height: 52px; padding: 0 22px; border: 1px solid var(--wp--preset--color--border); border-radius: 64px; background: #fff; font: 15px var(--wp--preset--font-family--body); color: var(--wp--preset--color--navy); } .sh-search__form .wp-block-search__input:focus { outline: none; border-color: var(--wp--preset--color--blue); box-shadow: 0 0 0 3px rgba(49, 87, 213, .15); } .sh-search__results .wp-block-post { padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--border); } .sh-search__title { margin: 0 0 8px; font-size: 22px; line-height: 1.3; } .sh-search__title a { color: var(--wp--preset--color--navy); text-decoration: none; } .sh-search__title a:hover { color: var(--wp--preset--color--blue); } /* Botão grande (56px) — usado no rodapé e nas bandas de CTA */ .sh-btn--lg .wp-block-button__link { display: inline-flex; align-items: center; height: 56px; padding: 0 42px; font-size: 15px; } /* ---------- Cabeçalho ---------- */ .sh-header { padding: 16px 24px; pointer-events: none; } :where(body:not(.editor-styles-wrapper)) .sh-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; } .admin-bar .sh-header { top: 32px; } @media (max-width: 782px) { .admin-bar .sh-header { top: 46px; } } .sh-header .sh-header__bar { position: relative; gap: 24px; max-width: 1400px; height: 80px; margin: 0 auto; padding: 0 8px 0 24px; border-radius: 64px; pointer-events: auto; transition: background .3s, box-shadow .3s, backdrop-filter .3s; } .sh-header.is-scrolled .sh-header__bar { background: rgba(238, 242, 247, .72); -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px); box-shadow: 0 0 10px rgba(11, 18, 32, .08); } .sh-header__brand { flex-shrink: 0; } .sh-header .sh-logo { margin: 0; } .sh-header .sh-logo a { display: flex; } .sh-header .sh-logo img { display: block; width: auto; height: 64px; } @media (max-width: 640px) { .sh-header .sh-logo img { height: 50px; } } .sh-logo--light { display: none; } .sh-has-hero .sh-header:not(.is-scrolled) .sh-logo--light { display: block; } .sh-has-hero .sh-header:not(.is-scrolled) .sh-logo--dark { display: none; } .sh-header__cta { flex-shrink: 0; } /* Navegação (core/navigation com overlay "sempre"): pílula no desktop, dropdown abaixo de 1320px. */ .sh-header .sh-nav { font-family: var(--wp--preset--font-family--body); } .sh-header .sh-nav .wp-block-navigation-item__content { display: flex; align-items: center; height: 48px; padding: 0 clamp(18px, 1.7vw, 28px); box-sizing: border-box; border: 1px solid transparent; border-radius: 64px; font-size: 15px; font-weight: 500; line-height: 1; color: #AAB5C9; white-space: nowrap; text-decoration: none; transition: all var(--wp--custom--motion--normal) var(--wp--custom--motion--ease-out); } .sh-header .sh-nav .wp-block-navigation-item__content:hover { color: #fff; background: rgba(255, 255, 255, .06); } .sh-header .sh-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--navy); font-weight: 600; background: #fff; border-color: #141F35; } .sh-header .sh-nav .sh-nav__cta { display: none; } .sh-header .sh-nav .wp-block-navigation__responsive-container-open, .sh-header .sh-nav .wp-block-navigation__responsive-container-close { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid transparent; border-radius: 50%; color: #fff; cursor: pointer; background: var(--wp--preset--gradient--navy) padding-box, linear-gradient(rgba(170, 181, 201, .5), rgba(0, 0, 0, 0)) border-box; } .sh-header .sh-nav .wp-block-navigation__responsive-container-open svg, .sh-header .sh-nav .wp-block-navigation__responsive-container-close svg { width: 20px; height: 20px; } @media (min-width: 1320px) { .sh-header .sh-nav .wp-block-navigation__responsive-container-open, .sh-header .sh-nav .wp-block-navigation__responsive-container-close { display: none; } .sh-header .sh-nav .wp-block-navigation__responsive-container, .sh-header .sh-nav .wp-block-navigation__responsive-container.hidden-by-default { display: block; position: relative; inset: auto; z-index: auto; width: auto; height: auto; padding: 0; background: none; overflow: visible; } .sh-header .sh-nav .wp-block-navigation__responsive-close, .sh-header .sh-nav .wp-block-navigation__responsive-dialog { width: auto; max-width: none; margin: 0; } .sh-header .sh-nav .wp-block-navigation__responsive-container-content { display: block; padding: 0; } .sh-header .sh-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: 4px; padding: 5px; border: 1px solid transparent; border-radius: 64px; background: var(--wp--preset--gradient--navy) padding-box, linear-gradient(rgba(170, 181, 201, .5), rgba(0, 0, 0, 0)) border-box; box-shadow: var(--wp--preset--shadow--xs); } } @media (max-width: 1319px) { .sh-header .sh-header__bar { gap: 8px; } .sh-header .sh-header__brand { margin-right: auto; } /* position:static → o dropdown se ancora na barra (.sh-header__bar), não no